javascript - 変更方法テキストフィールドが表示されないように設計しますか？

Question

重複の可能性:
入力タイプ=ファイル 表示のみボタン

には、次のような設計があります。

テキストフィールドが表示されないように変更できますか?

Answer 1

非常に優れたガイドがquirksmode にあります - Styling an input type="file"

質問に一致するようにいくつかの変更を加えた引用：

1. 法線<input type="file">を取り、 で要素に入れposition: relativeます。またabsolute

2. この同じ親要素に、正しいスタイルを持つ画像またはボタンを追加します。この要素を絶対に配置して、要素と同じ場所を占めるようにします。<input type="file">.

3. の を に設定して、z-indexスタイル付きの画像またはボタンの上に配置します。<input type="file">2

4. 最後に、 の を に設定opacityし<input type="file">ます0。は<input type="file">事実上非表示になり、スタイル設定されたイメージまたはボタンが透けて見えますが、[参照] ボタンをクリックすることはできます。visibility: hidden(真に見えない要素もクリックできないため、は使用できないことに注意してください。また、<input type="file">クリック可能なままにする必要があります)

Answer 2

質問にjQueryタグは表示されませんが、便利で、バニラJSで書き直すのは非常に簡単です。これは、私がgithubで管理しているプラ​​グインであるIdealFormsから抽出した小さなjQueryプラグインです。multipleIEとHTML5ブラウザーのフォールバックを使用して、必要なことを実行するためのすべての基本をカバーしています。さらに、イベントの処理とマークアップの置き換え。CSSは独自のものですが、ご覧のとおり複雑すぎてスタイルを設定することはできません。必要に応じて、テキストフィールドを非表示にすることもできます。ここでの考え方は、これによりCSSで可能なあらゆるカスタマイズが可能になるということです。

$.fn.toCustomFile = function () {
  return this.each(function () {

    var

    $file = $(this), // The file input

    // Necessary markup
    $wrap = $('<div class="wrap">'),
    $input = $('<input type="text" class="filename" />'),
    $button = $('<button type="button" class="upload">Open</button>')

    // Hide by shifting to the left, that way can 
    // still use events that are otherwise problematic
    // if the field is hidden as in "display: none"
    $file.css({
      position: 'absolute',
      left: '-9999px'
    })

    // Events
    $button
      .attr('tabIndex', -1) // disable focus on button for better usability
      .click(function () {
        $file.trigger('click') // Yes, `click`, not `change`. Crossbrowser compat.
      })

    $file
      .attr('tabIndex', -1)
      .on({
        change: function () {
          // Detect if browser supports HTML5 "file multiple"
          var multipleSupport = typeof $('input')[0].multiple !== 'undefined',
              files = [],
              fileArr,
              filename
          if (multipleSupport) {
            fileArr = $file[0].files
            for (var i = 0, len = fileArr.length; i < len; i++)
              files.push(fileArr[i].name)
            filename = files.join(', ')
          } else {
            filename = $file.val().split('\\').pop() // Remove fakepath
          }
          $input.val(filename)
          // Set filename as title tooltip on 
          // input field for better usability
          $input.attr('title', filename)
        },
        focus: function () {
          $input.trigger('focus')
        }
    })

    $input
      .on({
        keyup: function () { $file.trigger('change') },
        focus: function () { $file.trigger('change') },
        blur: function () { $file.trigger('blur') },
        // Open files when pressing [ENTER]
        // on the input field
        keydown: function (e) { if (e.which === 13) $file.trigger('click') }
      })

    // Append to DOM
    $wrap.append($button, $input).insertAfter($file)

  })
}

使いやすさの要点は次のとおりです：https ：//gist.github.com/3051209

Answer 3

提案: uploadify プラグインを使用できます。