首頁 > web前端 > css教學 > 如何動態更新 Bootstrap 4 檔案輸入標籤?

如何動態更新 Bootstrap 4 檔案輸入標籤?

Patricia Arquette
發布: 2024-11-03 01:15:29
原創
807 人瀏覽過

How to Dynamically Update Bootstrap 4 File Input Labels?

Bootstrap 4 Bootbox 入門

理解挑戰

在Bootstrap 4 中,自定義文件輸入組件呈現了一個常量“選擇文件”標籤,無論文件選擇如何。要使用所選檔案名稱動態更新此標籤,了解 JavaScript 和 CSS 操作至關重要。

Bootstrap 4 檔案輸入解決方案

版本4.5以上:

  • 自訂檔案可用。要自訂文件按鈕文本,必須使用 CSS 或 JavaScript。

版本 4.1 及更高版本:

  • 佔位符文字駐留在自訂中-file-label 元素。
  • 通過設置自定義標籤文本CSS:

    <code class="css">.custom-file-input ~ .custom-file-label::after {
      content: "Button Text";
    }</code>
    登入後複製

Bootstrap 4.1 及更高版本的替代方案:

  • 利用自訂檔案輸入插件,例如: https://www.codeply.com/go/uGJOpHUd8L/file-input

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板