HTML表单中的必填和只读输入

Question

我正在制作一个表单。在其中一个标签上有一个OnClick事件处理程序，它打开了一个弹出窗口，在那里您可以选择一些内容，然后自动填充标签。

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

这是标签的代码：

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

但是在Chrome中，required属性不起作用。但该字段是必填的。

有人知道我该如何使其工作吗？

- Mathlight

---

required 是HTML5中新增的属性 - 它仍然不被所有浏览器支持。 - Muleskinner

你应该在你的问题中标记HTML5标签和Chrome标签。 - Muleskinner

@Muleskinner：它被Firefox、Chrome和Opera的稳定版本支持：http://caniuse.com/#search=required - Blender

@Blender，感谢你提供的网站，我立刻收藏了它 :D - Mathlight

Answer 1

我有和你相同的需求，并找到了一个简单的方法来做到这一点。 如果您想要一个“只读”字段也是“必填”的（这在基本HTML中不受支持），而且您感觉太懒去添加自定义验证，那么只需使用jQuery将该字段设置为只读即可：

改进

根据评论中的建议进行修改。

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

<script>
    $(".readonly").on('keydown paste focus mousedown', function(e){
        if(e.keyCode != 9) // ignore tab
            e.preventDefault();
    });
</script>

致谢：@Ed Bayiates，@Anton Shchyrov，@appel，@Edhrendal，@Peter Lenjo

原始内容

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

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

- Kanak Singhal

---

我还添加了一个粘贴处理程序以防止默认操作，这样解决方案就完成了！ - Ed Bayiates

答案不错，但是他阻止了所有键（包括Tab、左右方向键），并没有阻止"Cut"事件。我写了自己的版本 :) - Anton Shchyrov

非常感谢！@Kanak，你的答案对我很有帮助。 - Carmoreno

修复数字输入的方法是添加一个“mousedown”处理程序。 - appel

我添加了焦点处理程序以避免自动完成和显示光标。 - Peter Mghendi

Answer 2

readonly 字段不能拥有 required 属性，因为通常假设它们已经持有某个值。

- BenM

---

你不知道有什么解决方法吗？因为我想在表单真正提交之前检查它... - Mathlight

@TWCrap 如果你的输入字段是只读的，那么你认为用户该如何输入任何值呢？ - yogi

@yogi，如果你仔细阅读了问题，那么你会看到我使用了一个OnClick事件处理程序，它会弹出一些东西并发送一个值回来... - Mathlight

除了使用JS进行一些验证以确保值只是您输入的其中之一，您几乎无能为力。此外，我建议在表单上使用“onfocus”来使用选项卡。 - BenM

@yogi 带有日期选择器模态框... - ajbraus

是的，日期选择器模态框是显而易见的使用情况，readonly 是唯一可以阻止移动设备键盘不必要弹出的方法。 - Rob Grant

Answer 3

移除readonly并使用函数

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

它能够像您想要的那样运作。

- Parth Patel

---

当点击退格键时无法处理删除内容。 - Sanjoy Kanrar

有没有办法去掉光标？或者聚焦于其他地方？这可能吗？ - thanos.a

Answer 4

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;"，但这不是我的情况，因为我使用了一个月份选择器。我的月份选择器在单击时显示一个对话框。

- Yevgeniy Afanasyev

---

谢谢，这是一个简单的解决方案。 - matasoy

Answer 5

这是有意为之的。根据官方HTML5标准草案，“如果在输入元素上指定了readonly属性，该元素将被禁止进行约束验证。”（例如，其值不会被检查。）

- user2428118

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;
}

- Udara Seneviratne

---

这看起来相当不错。你对这个 CSS 技巧的浏览器支持了解多少？ - Mathlight

这并不会阻止任何人使用制表键进入该字段并输入一些文本。 - sean

@cyanbeam - 你不能添加一个tabIndex为-1吗？ - thecoolmacdude

我想你可以这样做。我的意思是，无论你采取什么措施来禁用更改字段，似乎都有些不正规，也不符合语义学的正确性。 - sean

Answer 7

如果有人只想从html中实现，这对我有效。

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

- Shabbir

---

一个简单的解决方案，简单易行。 - John Chidi

Answer 8

我认为这应该会有所帮助。

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

- scireon

Answer 9

基于 @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" />

顺便问一下，有人知道如何将 cut 事件翻译成 copy 事件吗？

- Anton Shchyrov

Answer 10

必填和只读不能同时使用。

不过，你可以像这样创建两个输入框：

<input id="One" readonly />
<input id="Two" required style="display: none" /> //invisible

将值Two更改为输入框One中的值。

- Deadpool