一、基本概念

jsreadonly 是 JavaScript 中的一个属性，用于设置 HTML 元素或对象的只读状态，即该元素或对象无法被修改。 当 jsreadonly 属性被设置为 true 时，元素或对象的值无法修改；当设置为 false 时，元素或对象的值可以修改。 jsreadonly 可以应用于多种 HTML 标签，如 input、textarea、select 等。

二、应用场景

1、表单中的输入框。

<form>
  <input type="text" value="只读文本框" readonly>
  <input type="text" value="可编辑文本框">
  <textarea readonly>只读文本域</textarea>
  <textarea>可编辑文本域</textarea>
</form>

上面的代码中，第一个 input 和 textarea 设置了 readonly 属性，即为只读状态，无法被编辑；第二个 input 和 textarea 未设置 readonly 属性，可以被编辑。 2、显示数据而无需用户修改的元素。

<p>当前时间：</p>
<p id="time" readonly></p>

// JS代码
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
// 将时间显示在id为time的元素上
document.getElementById('time').innerHTML = hour + ':' + minute;

上面的代码中，p 标签的 id 为 time，设置了 readonly 属性，即只能通过 JS 代码来修改它的内容，而不是通过用户输入。

三、注意事项

1、readonly 只是前端表单的一种控制方式，它只能限制用户在前端进行修改，但是无法防止用户在后端篡改请求数据，因此需要在后端做好数据的合法性验证。 2、readonly 属性仅适用于表单元素和拥有 value 属性的元素。 3、readonly 属性被设置为 true 时，元素仍然可以被选择。 4、在某些浏览器中，只读元素的值可以复制和粘贴。

四、兼容性

readonly 属性的兼容性良好，几乎所有浏览器都支持该属性。

五、总结

jsreadonly 是 JavaScript 中的一个属性，用于设置 HTML 元素或对象的只读状态。它可以应用于多种 HTML 标签，适用于表单中的输入框、显示数据的元素等场景。使用时需要注意 readonly 仅限于前端，不可防止后端篡改请求数据，并且在某些浏览器中，readonly 元素的值可以复制和粘贴。