我正在制作表格。在一个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;" />
它可以按您的意愿工作。
这是设计使然。根据官方 HTML5 标准草案，“如果在readonly输入元素上指定了属性，则该元素将被禁止进行约束验证。” （例如，它的值不会被检查。）
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在点击时显示一个对话框。
是的，有解决此问题的方法。我从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;
}
如果有人只想从 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" />PS有人知道cut事件转化为copy事件吗？
required 和 readonly 不能一起工作。
尽管您可以像这样进行两个输入：
<input id="One" readonly />
<input id="Two" required style="display: none" /> //invisible
并将值更改Two为 input 中的值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>