如何在 IE 中禁用文件输入文本框？答案

【问题标题】：How to disable file input text box in IE?如何在 IE 中禁用文件输入文本框？
【发布时间】：2010-10-10 03:42:09
【问题描述】：

是否可以阻止用户在 IE 中的文件输入文本框中输入内容？我问的原因是，如果用户输入的文本看起来不像文件系统路径（例如，不以 c:... 之类的开头），那么当用户单击提交按钮时，什么都不会发生。

我不想让用户在框中输入或让表单正常提交。

我发现这里问了同样的问题，但没有答案： http://www.webmasterworld.com/html/3290988.htm

这个人想出了一个技巧，如果没有其他合适的答案，我可以使用它： http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

编辑：澄清 - 如果用户在“浏览”按钮旁边的文本框中键入“不是文件路径”并单击提交，则在 IE 中不会发生任何事情。表单不会提交 - 当框没有真实的文件路径时，IE 不允许提交表单。

【问题讨论】：

标签： html file internet-explorer input filepath

【解决方案1】：

这个怎么样？您不能输入，也不能右键单击并粘贴。

<input type="file" name="file" onKeyDown="this.blur()" onContextMenu="return false;">

【讨论】：

简洁优雅。作品。 +1。

【解决方案2】：

一开始这可能是个坏主意。如果用户没有使用 Windows 操作系统并且想要上传文件 /home/user/example.txt 怎么办？

这种类型的检查可能会更好地在服务器端实现。

【讨论】：

不在服务器上，它应该在浏览器上……当然，如果 HTML 设计更合理的话。
用户可以篡改 HTML/Javascript 并仍然提交不符合网页检查内容的文件。确保它的唯一方法是在服务器端检查它。客户端仍然可以很好地为非篡改用户节省一些时间和服务器资源。

【解决方案3】：

我用另一种方式解决了这个问题，使用按钮而不是提交，并在提交前使用 JavaScript 检查值。

<input type="file" name="inputFile">
<input type="button" onclick="if(fileHasValidPath()) { submitForm(); }" value="Submit">

function fileHasValidPath() {
  if (isIE()) {
    var inputFile = document.forms[0].inputFile;
    if (inputFile.value != "" && /^(\w:)|(\\)/.test(inputFile.value)) {
      alert("File is not a valid file.  Please use the Browse button to select a file.");
      inputFile.select();
      inputFile.focus();
      return false;
    }
  }

  return true;
}

function submitForm() {
  document.forms[0].submit();
}

我意识到仍然需要对文件进行服务器端验证，但这只是为了防止用户单击提交按钮而没有看到任何事情发生。此外，它假定 IE 使用的是 Windows 操作系统。

【讨论】：

您还可以将验证方法添加到表单的 onsubmit 事件并使用标准提交。
“另外，它假定 IE 使用 Windows 操作系统。” -> 我数不清自己花了多少时间诅咒做出这些假设的网站......

【解决方案4】：

一种方法是在提交按钮中添加一些 JavaScript 代码。想法是验证盒子并停止提交或允许提交。

但是，您最好只在服务器端验证文件内容并将适当的错误返回给客户端。

【讨论】：

【解决方案5】：

对于安全问题，输入类型=文件元素的值属性是只读的。您可以阅读此属性并进行检查。如果它不符合您的规则，您将给出警告并让人修改它。另一种方法是使用 outerHTML 属性覆盖它。例如： HTML 输入文件元素称为 objInputFileElement。 objInputFileElement.outerHTML="";

【讨论】：

【解决方案6】：

你不能用

<input ... disabled>

编辑：不，实际上这也阻止了提交......但显然在 HTML 4 中

<input ... readonly>

应该可以。 http://htmlhelp.com/reference/html40/forms/input.html

【讨论】：

这将禁止用户实际单击“浏览”按钮来选择文件。我仍然希望他们能够选择一个文件。

【解决方案7】：

我找到了解决您问题的选项。是contentEditable选项如下：

<input type="file" name="name" contentEditable="false"/>

【讨论】：

【解决方案8】：

这是contentEditable 选项的演示：

<input type="file" name="name" contentEditable="false" />

【讨论】：

【解决方案9】：

我的解决方案基于this thread。

所以，考虑到这个文件字段：

<input type="file" id="file_field">

我让它在 jquery 中使用类似的东西：

$(document).ready( function() {
    $('#file_field').bind("keydown", function(e) {
        e.preventDefault();
    });
});

注意：您必须使用 keydown 而不是 keypress，因为它涵盖DEL 和 BACKSPACE 以及任何打印键。

【讨论】：