可通过 document.queryselectorall('input[readonly], textarea[readonly]') 获取所有带 readonly 属性的 input 和 textarea 元素;若需按运行时只读状态筛选,应使用 array.from(document.queryselectorall('input, textarea')).filter(el => el.readonly)。

可以通过 document.querySelectorAll 配合属性选择器 [readonly] 来获取所有具有只读属性的 <input> 元素。
使用 [readonly] 属性选择器
HTML 中的 readonly 是一个布尔属性,只要存在(无论值是什么),元素即为只读。JavaScript 中推荐用带该属性的 CSS 选择器匹配:
-
document.querySelectorAll('input[readonly]')—— 获取所有带readonly属性的input元素(包括type="text"、"email"、"number"等) - 注意:它不匹配
textarea[readonly]或select[readonly](select不支持readonly,textarea支持但需单独加)
如果还需包含 textarea
textarea 也支持 readonly 属性,如需一并获取,可扩展选择器:
document.querySelectorAll('input[readonly], textarea[readonly]')- 返回的是
NodeList,可直接遍历或转为数组:Array.from(...)
区分“只读状态”和“readonly 属性”
注意:readonly 是 HTML 属性,不是 DOM 属性的实时状态。以下情况需留意:
- 通过 JavaScript 设置
el.readOnly = true(注意大小写)会更新 DOM 属性,但不会自动添加readonly特性(attribute),除非显式调用el.setAttribute('readonly', '') - 因此,仅靠
[readonly]选择器只能捕获初始有该属性或手动设置了该 attribute 的元素,无法捕获仅通过 JS 设置.readOnly属性但未同步 attribute 的情况 - 如需严格按当前只读状态筛选,可用
Array.from(document.querySelectorAll('input, textarea')).filter(el => el.readOnly)
兼容性与建议
该方法在所有现代浏览器中均支持,包括 IE9+。实际使用中建议:
- 优先用
[readonly]选择器——语义清晰、性能好、符合 HTML 意图 - 若业务逻辑依赖运行时只读状态(例如动态切换),改用
.readOnly属性判断更稳妥 - 避免混淆
readonly(用户不可编辑但可聚焦、可提交)和disabled(不可聚焦、不参与表单提交)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











