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

我和你的要求相同，我想出了一个简单的方法。如果你想要一个＆＃34; readonly＆＃34;要求的领域＆＃34;也（基本HTML不支持），你觉得懒得添加自定义验证，然后只使用jquery这样只读字段：

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

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

修改

正如@Ed Bayiates在评论中指出的那样，您还可以像这样添加粘贴处理程序来防止默认：

<input type="text" class="readonly" required /> <script> $(".readonly").on('keydown paste', function(e){ e.preventDefault(); }); </script>

Answer 2

readonly字段不能包含required属性，因为通常认为它们已经拥有某些值。

Answer 3

这是设计的。根据{{3}}，“如果在输入元素上指定了readonly属性，则该元素为official HTML5 standard drafts。” （例如，不会检查其值。）

Answer 4

删除readonly并使用功能

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

它可以随心所欲地工作。

Answer 5

是的，此问题有解决方法。我是从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 6

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

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

Answer 7

您可以为模板执行此操作：

<input required onfocus="unselect($event)" class="disabled">

这是你的js：

unselect(event){
    event.preventDefault();
    event.currentTarget.blur();
}

对于用户，输入将被禁用并同时被要求，前提是您有一个用于禁用输入的css类。

Answer 8

基于回答@KanakSinghal但没有阻止所有密钥和阻止cut事件

＆＃13;

$('.readonly').keydown(function(e) {
  if (e.keyCode === 8 || e.keyCode === 46)  // Backspace & del
    e.preventDefault();
}).on('keypress paste cut', function(e) {
  e.preventDefault();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="readonly" value="test" />

＆＃13;

P.S。有人知道cut事件转换为copy事件？

Answer 9

如果任何人只想通过html进行操作，这对我有用。

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

Answer 10

Required和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 11

必填且只读不合作。

虽然你可以输入两个这样的输入：

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

将值Two更改为输入One内的值。

Answer 12

我遇到了同样的问题，最后我使用了这个解决方案（使用jQuery）：

form.find(':input[required][readonly]').filter(function(){ return this.value === '';})

除了form.checkValidity（）之外，我还以某种方式测试了上述搜索的长度：

let fcnt = $(form)
    .find(':input[required][readonly]')
    .filter(function() { return this.value === '';})
    .length;

if (form.checkValidity() && !fcnt) {
   form.submit();
}

Answer 13

  function validateForm() {
    var x = document.forms["myForm"]["test2"].value;
    if (x == "") {
      alert("Name missing!!");
      return false;
    }
  }

  <form class="form-horizontal" onsubmit="return validateForm()" name="myForm" action="" method="POST">
   <input type="text"  name="test1">
    <input type="text" disabled name="test2">
    <button type="submit">Submit</button>
</form>

HTML需要表单中的只读输入

13 个答案: