如何让网页输入框变成只能看不能改？
你是不是遇到过这样的情况？在填写网页表单时，某个输入框明明显示着文字，但不管怎么敲键盘都改不了内容。这种既能看到信息又不能修改的效果，就是我们今天要聊的textarea只读设置。作为刚入门的前端小白，要怎么做才能实现这个效果呢？
为什么需要设置只读？ 举个实际例子：用户注册页面显示已绑定的手机号，这时候我们希望用户能核对号码但不能随意修改。或者后台管理系统展示用户留言时，管理员需要查看内容但不能误操作改动原始信息。这时候给textarea加上只读属性，就能完美解决这类需求。
两种方法设置只读 最简单粗暴的方式是在HTML标签里直接加属性。找到你的textarea标签，在开头标签里加上readonly这个单词就行： “`html
这里的内容无法修改“` 注意这个单词不需要赋值，只要存在就生效。就像给标签贴了个”禁止修改”的封条。
另一种方法是用JavaScript动态控制。比如根据用户权限切换编辑状态： javascript document.getElementById(‘myTextarea’).readOnly = true; 用这种方式，你可以在页面加载后根据条件动态设置只读状态，灵活性更高。
readonly和disabled有啥区别？ 这时候问题来了：同样是让元素不可操作，readonly和disabled到底有啥区别？咱们用实际效果对比下：
readonly的文本框： 文字呈正常黑色 可以选中复制内容 表单提交时会带上这个字段的值光标可以定位到输入框
disabled的文本框：
文字变成灰色 完全不能进行任何操作 表单提交时忽略这个字段 输入框呈现禁用状态的外观举个实际场景：用户信息修改页面，已认证的手机号用readonly展示（允许复制但不可改），未认证的号码用disabled显示（提醒需要先认证）。
动态切换的小技巧 有时候我们需要根据用户操作切换状态。比如勾选”同意协议”后才允许填写备注： “`javascript // 获取协议勾选框 const agreeCheckbox = document.querySelector(‘#agree’); // 获取备注输入框 const remarkTextarea = document.querySelector(‘#remark’);
agreeCheckbox.addEventListener(‘change’, function() { remarkTextarea.readOnly = !this.checked; }); “` 这个代码实现了勾选协议后自动解除备注框的只读状态。注意这里用readOnly属性时要注意大小写，JavaScript中属性名是驼峰写法。
常见问题解答 Q：为什么设置了readonly还能粘贴内容？ A：readonly属性只是阻止键盘输入，通过右键菜单或快捷键粘贴仍然可以修改内容。如果需要完全禁止修改，需要配合JavaScript拦截粘贴操作。
Q：用CSS设置pointer-events:none能达到同样效果吗？ A：虽然视觉上输入框不能操作了，但这种方法有两个问题：1. 屏幕阅读器可能无法正确识别状态 2. 表单提交时仍会包含修改后的值。建议还是用标准的属性设置。
Q：怎么让只读输入框看起来更明显？ A：可以加上CSS样式提示： css textarea[readonly] { background-color: #f5f5f5; border-color: #ddd; cursor: not-allowed; } 这样用户看到灰色背景和禁用光标，就知道这个框不能修改了。
小编在实际开发中发现，90%的场景用readonly属性就能满足需求。但要注意在表单提交时，如果后端需要这个字段值，千万别用disabled属性。最近帮朋友调试一个BUG，就是因为误用disabled导致手机号字段没传过去，排查了半天才发现是这个原因。
相关文章：
相关推荐：