时间戳

首页 > 解决方案 > INPUT 类型=IE11 上的文件

javascript - INPUT 类型=IE11 上的文件

问题描述

我在 IE11 上输入类型文件时遇到问题。

IE11 将输入字段显示为两个可制表的伪元素（文本/按钮）。

我找到了::-ms-browse让我将按钮设置为的类display: none，但由于某种原因，它仍然是可选项卡的。

重现：

目标是隐藏输入字段并将标签显示为按钮而不是输入字段。为此，一个按钮必须按两次制表符会很尴尬。

input[type="file"]::-ms-browse {
  display: none;
  visibility: hidden;
}

input[type="file"]+label.fake-file-upload {
  background: $white;
  color: #999;
  font-family: "Glober", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  padding: 0.75rem 4rem;
  letter-spacing: 0.25rem;
  cursor: pointer;
  display: table;
}

input[type="file"]:focus+label.fake-file-upload {
  outline: 2px dotted #444;
  outline-offset: 5px;
  border-spacing: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required>
<label for="upload-photo" class="fake-file-upload">DURCHSUCHEN</label>

标签： javascriptjqueryhtmlcssinternet-explorer-11

解决方案

在玩了一下之后，我可能会有一个想法：

如果您希望能够防止用户进入输入，使标签可标签和可点击，我会这样做：

input[type="file"]::-ms-browse {
  display: none;
  visibility: hidden;
}

input[type="file"]+label.fake-file-upload {
  background: $white;
  color: #999;
  font-family: "Glober", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  padding: 0.75rem 4rem;
  letter-spacing: 0.25rem;
  cursor: pointer;
  display: table;
}

input[type="file"]:focus+label.fake-file-upload {
  outline: 2px dotted #444;
  outline-offset: 5px;
  border-spacing: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required tabindex="-1">
<label for="upload-photo" class="fake-file-upload" tabindex="0">DURCHSUCHEN</label>

$('.fake-file-upload').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('.fake-file-upload').trigger("click");
    return false;  
  }
});

测试用例：https ://jsfiddle.net/keystfjw/29/

推荐阅读