readonly是布尔属性，存在即生效，仅对文本类input（如text、email、date等）和textarea有效，不影响聚焦、复制及表单提交；checkbox、radio等不支持；区别于disabled，readonly值会提交且可交互。

直接在 <input> 标签里写 readonly 就能生效，它是个布尔属性，存在即启用，不需要赋值。

比如：

<input type="text" value="系统生成订单号" readonly>

这个输入框用户不能打字、不能删除，但可以点击聚焦、用 Tab 切换进去、选中文字、复制内容，提交表单时它的值也会一起发给后端。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

哪些 input 类型支持 readonly
只对文本类输入控件有效：

• type="text"、"password"、"email"、"tel"、"url"、"search"
• type="date"、"number"、"datetime-local" 等带文本输入行为的类型
• <textarea></textarea> 同样支持

不支持的情况（写了也无效）：

• type="checkbox"、type="radio"、type="hidden"
• <select></select>、<button></button>、普通 <div> 或 <code>contenteditable 元素

  别和 disabled 搞混

  • readonly：可聚焦、可复制、值会提交 → 适合“展示+需保留数据”的场景，比如预填邮箱、订单号、时间戳
  • disabled：不可聚焦、不可复制、值不提交 → 适合“临时禁用且不参与业务流程”的字段

  动态控制只读状态（JavaScript）
  推荐用原生属性操作，兼容性更稳：

  // 设为只读
  inputEl.setAttribute('readonly', 'readonly');
  // 或
  inputEl.readOnly = true; // 注意 JS 中是 readOnly（驼峰）
  
  // 取消只读
  inputEl.removeAttribute('readonly');
  // 不建议用 inputEl.readOnly = false，部分旧版 Safari 有兼容问题

  样式和可访问性建议
  浏览器默认不改变 readonly 输入框外观，容易让用户误以为能编辑。建议加一点 CSS 提示：

  input[readonly], textarea[readonly] {
    background-color: #f5f5f5;
    cursor: default;
    border-color: #ddd;
  }

  同时加上 aria-readonly="true"，方便屏幕阅读器识别：

  <input type="text" value="不可修改" readonly aria-readonly="true">