Html 如何在 IE 中禁用文件输入文本框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/591710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable file input text box in IE?
提问by Matt McCormick
Is it possible to prevent a user from typing in a file input text box in IE? The reason I ask is that if a user enters text that does not look like a file system path (eg. doesn't start with something like c:...) then when the user clicks the submit button nothing will happen.
是否可以阻止用户在 IE 中的文件输入文本框中键入内容？我问的原因是，如果用户输入的文本看起来不像文件系统路径（例如，不以 c:... 开头），那么当用户单击提交按钮时，什么都不会发生。
I would either like to not allow the user to type in the box or have the form submit as normal.
我不想让用户在框中输入或让表单正常提交。
I have found that the same question was asked here with no answer: http://www.webmasterworld.com/html/3290988.htm
我发现这里问了同样的问题没有答案：http: //www.webmasterworld.com/html/3290988.htm
And this person came up with a hack which I can use if there is no other suitable answer: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
如果没有其他合适的答案，这个人想出了一个我可以使用的黑客：http: //www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
EDIT: To clarify - if the user types "not a file path" in the text box next to the "Browse" button and clicks submit, in IE nothing will happen. The form will not submit - IE does not allow a form to be submitted when a <input type="file"> box does not have a real file path.
编辑：澄清 - 如果用户在“浏览”按钮旁边的文本框中键入“不是文件路径”并单击提交，则在 IE 中不会发生任何事情。表单将不会提交 - 当 <input type="file"> 框没有实际文件路径时，IE 不允许提交表单。
采纳答案by Matt McCormick
I solved this with another way using a button rather than a submit and using JavaScript to check the value before submitting.
我用另一种方法解决了这个问题，使用按钮而不是提交，并在提交之前使用 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();
}
I realise there still needs to be server-side validation for the file but this is only to prevent a user clicking on the Submit button and not seeing anything happening. Also, it assumes IE using a Windows OS.
我意识到仍然需要对文件进行服务器端验证，但这只是为了防止用户单击“提交”按钮而看不到任何事情发生。此外，它假定 IE 使用 Windows 操作系统。
回答by rnielsen
How about this one? You can't type, or right click and paste.
这个怎么样？您不能键入，也不能右键单击并粘贴。
<input type="file" name="file" onKeyDown="this.blur()" onContextMenu="return false;">
回答by Ben S
This may be a bad idea to begin with. What if the user is not using a Windows OS and wants to upload the file /home/user/example.txt?
这可能是一个坏主意。如果用户使用的不是 Windows 操作系统并且想要上传文件 /home/user/example.txt 怎么办？
This type of check might be better implemented server side.
这种类型的检查可能会更好地实现服务器端。
回答by yuxiaoxu
the input type=file element's value property is readonly as for security issue. You can read this property and do a check. If it is not correspond with your rules, you will give a warn and let person to modify it. The other way use outerHTML property override it. for example: HTML input file element called objInputFileElement. objInputFileElement.outerHTML="";
输入 type=file 元素的 value 属性是只读的，因为安全问题。您可以阅读此属性并进行检查。如果它不符合您的规则，您将发出警告并让人修改它。另一种方法是使用 outerHTML 属性覆盖它。例如：名为 objInputFileElement 的 HTML 输入文件元素。objInputFileElement.outerHTML="";
回答by NotMe
one way is to put a little javascript code in the buttons onsubmit. The idea being to validate the box and either stop submission or allow it.
一种方法是在提交时的按钮中放入一些 javascript 代码。这个想法是验证框并停止提交或允许它。
However, you are probably better off just validating the file contents server side and rendering the appropriate error back to the client.
但是，您最好只验证文件内容服务器端并将适当的错误呈现回客户端。
回答by Antreas
I found the option that solves your issue. Is the contentEditableoption as follows:
我找到了解决您问题的选项。是否contentEditable选项如下：
<input type="file" name="name" contentEditable="false"/>
回答by Antreas
Here is a demonstration of the contentEditableoption:
这是该contentEditable选项的演示：
<input type="file" name="name" contentEditable="false" />
回答by Dentra Andres
I based my solution on this thread.
我的解决方案基于此线程。
So, considering this file field:
所以，考虑这个文件字段：
<input type="file" id="file_field">
I got it to work with something like this in jquery:
我让它在 jquery 中使用类似的东西：
$(document).ready( function() {
$('#file_field').bind("keydown", function(e) {
e.preventDefault();
});
});
NOTE:You must use keydowninstead of keypressas it covers DEL and BACKSPACE as well as any print key.
注意：您必须使用keydown而不是keypress，因为它涵盖了 DEL 和 BACKSPACE 以及任何打印键。
回答by David Z
Couldn't you use
你不能用吗
<input ... disabled>
EDIT:no, actually that prevents submission as well... but in HTML 4 apparently
编辑：不，实际上这也阻止了提交......但显然在 HTML 4 中
<input ... readonly>
should work. http://htmlhelp.com/reference/html40/forms/input.html
