理解挑戰
在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.1 及更高版本的替代方案:Original Bootstrap 4 Alpha 6的解決方案:
自訂初始佔位符和按鈕文字:
<code class="css">#customFile .custom-file-control:lang(en)::after { content: "Select file..."; } #customFile .custom-file-control:lang(en)::before { content: "Click me"; }</code>
擷取檔案名稱並更新輸入值:
<code class="javascript">$('.custom-file-input').on('change', function() { var fileName = $(this).val(); });</code>
<code class="css">.custom-file-control.selected:lang(en)::after { content: "" !important; }</code>
<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中文網其他相關文章!