我正在制作一个表格。在一个input标签上是一个OnClick事件处理程序，它打开一个弹出窗口，您可以在其中选择一些内容，然后它会自动填充input标签。
该输入标签也是readonly的，因此只会输入正确的数据。
这是input标签的代码：
<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();" />
但是required属性在 Chrome 中不起作用。但是该字段是必需的。
有人知道我如何让它工作吗？
我和你有同样的要求，我想出了一种简单的方法来做到这一点。如果你也希望一个"只读"字段也是"必需的"（基本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>
readonly字段不能具有 required 属性，因为通常假设它们已经具有一些值。
删除readonly并使用函数
<input type="text" name="name" id="id" required onkeypress="return false;" />
它随心所欲地工作。
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在单击时显示一个对话框。
这是设计使然。根据官方的HTML5标准草案，"如果在输入元素上指定了readonly属性，则该元素将被禁止进行约束验证。（例如，不会检查其值。
是的，此问题有一个解决方法。我从 https://codepen.io/fxm90/pen/zGogwV 网站上找到了它。
解决方案如下。
网页文件
<form>
<input type="text" value="" required data-readonly />
<input type="submit" value="Submit" />
</form>
CSS 文件
input[data-readonly] {
pointer-events: none;
}
如果有人只想从 html 中执行此操作，这对我有用。
<input type="text" onkeydown="event.preventDefault()" required />
我认为这应该会有所帮助。
<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>
您可以为模板执行此操作：
<input required onfocus="unselect($event)" class="disabled">
这对你的 js 来说：
unselect(event){
event.preventDefault();
event.currentTarget.blur();
}
对于用户，输入将被禁用并同时需要，前提是您有一个用于禁用输入的 css 类。
基于答案@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事件？
必需和只读不能一起工作。
尽管您可以像这样进行两个输入：
<input id="One" readonly />
<input id="Two" required style="display: none" /> //invisible
并将值Two更改为输入One内的值。
我有同样的问题，最后我使用这个解决方案（使用 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();
}
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>这对我来说是最好的解决方案。客户端不能输入任何内容，必须填写
<input type="text" class="read-only" required>
.read-only {
pointer-events: none;
}