HTML需要表单中的只读输入

Question

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

该输入标签也是readonly,因此只输入正确的数据.

这是input标签的代码:

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

但该required属性在Chrome中无效.但这个领域是必需的.

有谁知道我怎么能让它发挥作用？

Answer 1

我和你的要求相同,我想出了一个简单的方法.如果你想要"readonly"字段也是"必需"(基本HTML不支持),并且你觉得懒得添加自定义验证,那么只需使用jquery以这种方式读取字段:

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

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

编辑

正如@Ed Bayiates在评论中指出的那样,您还可以像这样添加paste处理程序来阻止默认:

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

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

Answer 2

readonly字段不能具有该required属性,因为通常认为它们已经拥有某个值.

Answer 3

这是设计的.根据官方的HTML5标准草案,"如果在readonly输入元素上指定了属性,则该元素将被禁止进行约束验证." (例如,不会检查其值.)

Answer 4

删除readonly并使用功能

<input type="text" name="name" id="id" required onkeypress="return false;" />

它可以按你的需要工作.

Answer 5

Required并且readonly不要一起工作。

但readonly可以用以下结构替换：

     <input     type="text"
                onkeydown="return false;"
                style="caret-color: transparent !important;"                   
                required>

1)onkeydown将停止对数据的操作

2)style="caret-color: transparent !important;"将隐藏光标。

3）style="pointer-events: none;"如果您的输入没有任何事件，您可以添加，但这不是我的情况，因为我使用了Month Picker. 我Month picker在点击时显示一个对话框。

Answer 6

是的,这个问题有一个解决方法.我是从https://codepen.io/fxm90/pen/zGogwV网站找到的.

解决方案如下.

HTML文件

<form>
  <input type="text" value="" required data-readonly />
  <input type="submit" value="Submit" />
</form>

CSS文件

input[data-readonly] {
  pointer-events: none;
}

Answer 7

如果有人只想从 html 中执行此操作，这对我有用。

<input type="text" onkeydown="event.preventDefault()" required />