做个工单详情页，内容要让用户能看能复制但不能改，给 textarea 加个属性就够，不用写 JS 去拦键盘事件。对应的属性是 readonly。

基础写法

<textarea readonly>这段内容只能看，不能改，但可以全选复制</textarea>

HTML5 里布尔属性直接写 readonly 就生效。textarea只读之后外观不变，光标还能点进去、文字能选中复制，只是键盘敲不进去，但 Ctrl+A 全选、Ctrl+C 复制照常能用，这是它和 disabled 最直观的差别。JS 里对应 element.readOnly = true，设回 false 就恢复可编辑。

readonly 和 disabled 的区别

  • 外观：disabled 会把整个框置灰，readonly 外观不变
  • 表单提交：readonly 的值会随表单一起提交，disabled 的不会，后端拿不到这个字段
  • 焦点：readonly 能获得焦点、能 Tab 进去，disabled 不能
  • 适用：readonly 用于「先展示后可改」的场景，disabled 用于「这个字段彻底不可用」

按场景选

订单号、流水号这类系统生成的字段，用 readonly 展示，既能让用户复制，表单提交时值也能带上；审核未通过要把输入框整个禁掉，用 disabled。表单里有不想让用户改但后端要收的字段，千万别顺手写成 disabled，数据默默丢了都不好查。移动端表现一致：readonly 有的机型会弹软键盘但输入无效，不用特意处理。

选择标准：只要用户还需要复制内容、后端还需要拿到这个值，就用 readonly；连复制都不需要的占位展示才用 disabled。别用 CSS 或者 JS 拦截键盘事件去模拟只读，原生属性最稳，浏览器兼容也省心。