Forms 表单中需要的HTML只读输入

我在做表格。在一个

input

标记上有一个

OnClick

事件处理程序，它打开一个弹出窗口，您可以在其中选择一些内容，然后它会自动填充

input

标记

该输入标记也是只读的，因此只会输入正确的数据

这是

输入

标记的代码：

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

但是

required

属性在Chrome中不起作用。但这是必须的

---

有人知道我如何让它工作吗？

readonly

字段不能具有

required

属性，因为通常假定它们已经具有一些值

这是设计的。根据“如果在输入元素上指定了

readonly

属性，则该元素为。”（例如，它的值不会被检查。）

我认为这应该会有所帮助

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

函数checkIfInputHasVal（）{
if（$（“#formafterredrict”）.val==”）{
警报（“FormAfterRedrict应该有一个值”）；
返回false；
}
}

我和你有同样的要求，我想出了一个简单的方法。 如果您希望“readonly”字段也是“required”（基本HTML不支持该字段），并且您觉得自己懒得添加自定义验证，那么只需使用jQuery将该字段设置为只读即可：

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

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

改进

在评论中形成建议

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

$（“.readonly”）.on（'keydown粘贴焦点mousedown'，函数（e）{
if（e.keyCode！=9）//忽略选项卡
e、 预防默认值（）；
});

片中：@Ed Bayiates、@Anton Shchyrov、@appel、@Edhrendal、@Peter Lenjo

原创

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

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

$（“.readonly”）.keydown（函数（e）{
e、 预防默认值（）；
});

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

这是给你的js的：

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

---

对于用户来说，如果您有一个css类用于禁用输入，那么输入将被禁用，同时也是必需的。

是的，这个问题有一个解决方法。我在现场找到的

解决办法如下

HTML文件

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

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

---

基于answer@KanakSinghal，但不阻止所有键，且阻止

cut

事件

$（'.readonly'）.keydown（函数（e）{
if（e.keyCode==8 | | e.keyCode==46）//退格和删除
e、 预防默认值（）；
}).on（按键粘贴剪切），功能（e）{
e、 预防默认值（）；
});


函数validateForm（）{
var x=document.forms[“myForm”][“test2”].value；
如果（x==“”）{
警报（“名称丢失！！”；
返回false；
}
}

提交
删除
只读
并使用该功能

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



它可以根据您的需要工作。
必需和只读不能一起工作

尽管您可以进行如下两种输入：

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


//无形的

然后将值
Two
更改为输入
One
中的值。如果有人只想从html中执行，这对我很有用

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

必需
和
只读
不能一起工作

但是，
readonly
可以替换为以下结构：

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



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

2） 
style=“插入符号颜色：透明！重要；”
将隐藏光标

3） 如果您的输入中没有任何事件，您可以添加
style=“pointer events:none；”“
，但这不是我的情况，因为我使用了
月份选择器。我的
Month picker
在单击时显示一个对话框。
我也有同样的问题，最后我使用了这个解决方案（使用jQuery）：

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

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

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

required
是HTML5中的一个新属性-并非所有浏览器都支持该属性。您应该使用HTML5标记和Chrome标记您的问题tag@Muleskinner：它有稳定版本的Firefox、Chrome和Opera支持：@Blender，谢谢你的网站，我马上把它加入了书签：你不知道有什么解决办法吗？因为我想在表单真正提交之前检查一下…@yogi，如果你读对了问题，那么你会看到我使用OnClick事件处理程序，它会弹出一些东西，发送一个值回来…好吧，除了进行一些验证以确保值只是你使用JS输入的值之一之外，你无能为力。另外，我建议使用
onfocus
，以便在表单上使用选项卡。@yogi带有日期选择器模式。是的，datepicker模式是显而易见的用例，
只读
，因为它是阻止移动设备键盘不必要弹出的唯一方法。我还添加了一个粘贴处理程序来防止默认值，解决方案就完成了！回答得很好，但他阻止了所有键（包括制表符、左键、右键），并且没有阻止
Cut
事件。我写了自己的版本：）非常感谢@卡纳克：你的回答对我很有用。数字输入的修复方法是添加一个“mousedown”处理程序。我添加了焦点处理程序以避免自动完成和显示光标。这看起来很整洁。你对浏览器支持这个css技巧了解多少？这并不能阻止任何人在该字段中使用tab键并键入一些文本。@cyanbeam-你不能添加一个tabIndex-1吗？我想你可以。我想我的观点是，无论你做什么来禁用更改字段似乎有点黑客行为，而且在语义上也不正确。请给出一些解释来支持你的答案。只有代码的答案不是很有教育意义。单击backspace按钮时无法处理删除内容。有没有办法摆脱光标？也许专注于其他事情？可能吗？谢谢，这是一个简单的解决办法。