理解挑戰
在Bootstrap 4 中,自定義文件輸入組件呈現了一個常量“選擇文件”標籤,無論文件選擇如何。要使用所選檔案名稱動態更新此標籤,了解 JavaScript 和 CSS 操作至關重要。
Bootstrap 4 檔案輸入解決方案
版本4.5以上:
版本 4.1 及更高版本:
通過設置自定義標籤文本CSS:
<code class="css">.custom-file-input ~ .custom-file-label::after { content: "Button Text"; }</code>
Bootstrap 4.1 及更高版本的替代方案:
Bootstrap 4 Alpha 6 的原始解決方案:
自訂初始佔位符和按鈕文字:
使用CSS 覆蓋預設佔位符和按鈕文字:
<code class="css">#customFile .custom-file-control:lang(en)::after { content: "Select file..."; } #customFile .custom-file-control:lang(en)::before { content: "Click me"; }</code>
擷取檔案名稱並更新輸入值:
使用JavaScript/jQuery 取得所選檔案的名稱:
<code class="javascript">$('.custom-file-input').on('change', function() { var fileName = $(this).val(); });</code>
檔案時隱藏佔位符文字使用CSS 選擇class:
<code class="css">.custom-file-control.selected:lang(en)::after { content: "" !important; }</code>
在檔案選擇上切換CSS 類別並將檔案名稱插入表單控製檔案範圍:
<code class="javascript">$('.custom-file-input').on('change', function() { var fileName = $(this).val(); $(this).next('.form-control-file').addClass("selected").html(fileName); });</code>
以上是如何動態更新 Bootstrap 4 檔案輸入標籤?的詳細內容。更多資訊請關注PHP中文網其他相關文章!