HTML 需要表单中的只读输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12777751/
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
HTML required readonly input in form
提问by Mathlight
I'm making a form. And on one inputtag is an OnClickevent handler, which is opening a popup, where you can choose some stuff, and then it autofills the inputtag.
我正在制作表格。在一个input标签上是一个OnClick事件处理程序，它打开一个弹出窗口，您可以在其中选择一些东西，然后它会自动填充input标签。
That input tag is also readonly, so only right data will be entered.
该输入标签也是readonly，因此只会输入正确的数据。
This is the code of the inputtag:
这是input标签的代码：
<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();" />
But the requiredattribute isn't working in Chrome. But the field is required.
但是该required属性在 Chrome 中不起作用。但该字段是必需的。
Does anybody know how I can make it work?
有谁知道我怎样才能让它工作？
回答by Kanak Singhal
I had same requirement as yours and I figured out an easy way to do this. If you want a "readonly" field to be "required" also (which is not supported by basic HTML), and you feel too lazy to add custom validation, then just make the field read only using jquery this way:
我和你有同样的要求，我想出了一个简单的方法来做到这一点。如果您还希望“只读”字段也是“必需的”（基本 HTML 不支持），并且您懒得添加自定义验证，那么只需使用 jquery 使该字段只读：
<input type="text" class="readonly" required />
<script>
$(".readonly").keydown(function(e){
e.preventDefault();
});
</script>
EDIT
编辑
as @Ed Bayiates pointed in the comment you can also add paste handler to preventDefault like this:
正如@Ed Bayiates 在评论中指出的那样，您还可以像这样添加粘贴处理程序以防止默认：
<input type="text" class="readonly" required />
<script>
$(".readonly").on('keydown paste', function(e){
e.preventDefault();
});
</script>
回答by BenM
readonlyfields cannot have the requiredattribute, as it's generally assumed that they will already hold some value.
readonly字段不能具有该required属性，因为通常假设它们已经具有某些值。
回答by Parth Patel
Remove readonlyand use function
删除readonly和使用功能
<input type="text" name="name" id="id" required onkeypress="return false;" />
It works as you want.
它可以按您的意愿工作。
回答by user2428118
This is by design. According to the official HTML5 standard drafts, "if the readonlyattribute is specified on an input element, the element is barred from constraint validation." (E.g. its values won't be checked.)
这是设计使然。根据官方的 HTML5 标准草案，“如果在readonlyinput 元素上指定了该属性，则该元素将被禁止进行约束验证。” （例如，不会检查其值。）
回答by Udara Seneviratne
Yes, there is a workaround for this issue. I found it from https://codepen.io/fxm90/pen/zGogwVsite.
是的，这个问题有一个解决方法。我是从https://codepen.io/fxm90/pen/zGogwV站点找到的。
Solution is as follows.
解决方法如下。
HTML File
HTML文件
<form>
<input type="text" value="" required data-readonly />
<input type="submit" value="Submit" />
</form>
CSS File
CSS文件
input[data-readonly] {
pointer-events: none;
}
回答by Yevgeniy Afanasyev
Requiredand readonlydon't work together.
Required并且readonly不要一起工作。
But readonlycan be replaced with following construction:
但readonly可以用以下结构替换：
<input type="text"
onkeydown="return false;"
style="caret-color: transparent !important;"
required>
1) onkeydownwill stop manipulation with data
1)onkeydown将停止对数据的操作
2) style="caret-color: transparent !important;"will hide cursor.
2)style="caret-color: transparent !important;"将隐藏光标。
3) you can add style="pointer-events: none;"if you don't have any events on your input, but it was not my case, because I used a Month Picker. My Month pickeris showing a dialog on click.
3）style="pointer-events: none;"如果您的输入没有任何事件，您可以添加，但这不是我的情况，因为我使用了Month Picker. 我Month picker在点击时显示一个对话框。
回答by Shabbir
If anyone wants to do it only from html, This works for me.
如果有人只想从 html 中执行此操作，这对我有用。
<input type="text" onkeydown="event.preventDefault()" required />
回答by Anton Shchyrov
Based on answer @KanakSinghal but without blocked all keys and with blocked cutevent
基于答案@KanakSinghal 但没有阻止所有键和阻止cut事件
$('.readonly').keydown(function(e) {
if (e.keyCode === 8 || e.keyCode === 46) // Backspace & del
e.preventDefault();
}).on('keypress paste cut', function(e) {
e.preventDefault();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="readonly" value="test" />P.S. Somebody knows as cutevent translate to copyevent?
PS 有人知道cut事件转化为copy事件吗？
回答by Alex Link
You can do this for your template:
您可以为您的模板执行此操作：
<input required onfocus="unselect($event)" class="disabled">
<input required onfocus="unselect($event)" class="disabled">
And this for your js:
这对于您的 js：
unselect(event){
event.preventDefault();
event.currentTarget.blur();
}
For a user the input will be disabled and required at the same time, providing you have a css-class for disabled input.
对于用户，输入将同时被禁用和需要，前提是您有一个用于禁用输入的 css 类。
回答by scireon
I think this should help.
我认为这应该有所帮助。
<form onSubmit="return checkIfInputHasVal()">
<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();" />
</form>
<script>
function checkIfInputHasVal(){
if($("#formAfterRederict").val==""){
alert("formAfterRederict should have a value");
return false;
}
}
</script>
