禁止用户输入输入

Question

我有input和一个button 。 单击该按钮时，应触发 JavaScript。 我需要限制输入，粘贴，删除...

当我为它设置disabled标签时，与其交互的 JavaScript 不起作用。

 <input disabled type="text" value="NOT BE CHANGED"> <button>Trigger some javascript</button>

还能如何input从打字，粘贴，删除限制......但仍然与JavaScript的互动？

Answer 1

<input type="text" class="id-format" id="id-format" value="SHALL NOT BE CHANGED">

JQuery：使用 JQuery 调用您的<input> id 字段并使用.prop()函数将readonly属性设置为 true。

$('#myID').prop('readonly', true);

纯 JS：调用input id 并添加 setAttribute() 函数以添加readonly属性并将其设置为 true。

document.getElementById("id-format").setAttribute('readonly', true);

或在您的input标签中内联设置您的属性

<input type="text" class="id-format" id="id-format" readonly="true" value="SHALL NOT BE CHANGED">

disabled不起作用的原因：如果元素被禁用，它不会响应用户操作，它无法聚焦，并且不会触发命令事件。 在表单元素的情况下，将不会提交。 不要将该属性设置为 true，因为这将表明您可以将其设置为 false 以再次启用该元素，但事实并非如此。

readonly : Type: boolean 如果设置为 true，则用户无法更改元素的值。 但是，该值仍可能被脚本修改。

JS小提琴在这里： https : //jsfiddle.net/72g6hpfc/

信息：