HTML需要只读形式输入 [英] HTML required readonly input in form

问题描述

我正在制作一个表格。在一个输入标记是一个 OnClick 事件处理程序，它打开一个弹出窗口，您可以在其中选择一些内容，然后它会自动填充输入标签。

该输入标签也是 readonly ，所以只会输入正确的数据。

这是输入标记的代码：

 < input type =textname =formAfterRederictid =formAfterRederictsize =50required readonly =只读OnClick =choose_le_page（）; /> 
  

但是所需的属性不起作用在Chrome中。但是该字段是必需的。

有人知道我可以如何使它工作吗？

解决方案

我有和你一样的要求，我想出了一个简单的方法来做到这一点。
如果你想要只读字段也是必需的（基本HTML不支持），并且你觉得自己懒得添加自定义验证，那么只需使用jquery这种方式使字段只读：

 < input type =textclass =readonlyrequired /> 
 
< script> 
 $（。readonly）。keydown（function（e）{
 e.preventDefault（）; 
}）; 
< / script> 
  

编辑

<因为@Ed Bayiates在评论中指出，您还可以添加粘贴处理程序来防止像这样的错误：

 < input type = textclass =readonlyrequired /> 
 
< script> （''keydown paste'，function（e）{
 e.preventDefault（）; 
}）; 
 $（。readonly 
< / script> 
  

I'm making a form. And on one input tag is an OnClick event handler, which is opening a popup, where you can choose some stuff, and then it autofills the input tag.

That input tag is also readonly, so only right data will be entered.

This is the code of the input tag:

<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();"  />

But the required attribute isn't working in Chrome. But the field is required.

Does anybody know how I can make it work?

解决方案

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:

<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:

<input type="text" class="readonly" required />

<script>
    $(".readonly").on('keydown paste', function(e){
        e.preventDefault();
    });
</script>

这篇关于HTML需要只读形式输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！