input只读属性（readonly）是一个让输入框只能看不能改的HTML标准属性，设置方法极简，而且它的值会老老实实跟着表单一起提交，这正是它和disabled最本质的区别。无论你是刚入门前端的新手，还是已经在项目里摸爬滚打多年的老手，只要跟表单打交道，就绕不开这个看似简单却暗藏玄机的小属性，这篇文章就把它的脾气秉性、使用姿势和常见坑一次性讲透。
input只读属性怎么设置？三种写法一次说清
想让一个输入框变成只读状态,不需要写一堆JavaScript，更不需要给输入框盖一层遮罩，readonly属性本身就是干这个的，你只需要在HTML标签里加上它就行。
直接在HTML标签里写
最朴素也最直接的写法,就是给input标签加上readonly关键字。
<input type="text" value="这里是只读内容" readonly>
就这么简单,加了readonly之后，用户点击这个输入框虽然能看到光标，也能选中文字，但就是改不了里面的内容，注意，readonly属性是个布尔属性，你不需要给它赋值，写上它就代表true，你写readonly=”readonly”或者readonly=”true”也完全没问题，只是没必要。
通过JavaScript动态设置
很多场景下,输入框的只读状态不是一开始就定死的，而是要根据用户操作动态切换，这时候你就可以用JavaScript来操作它的只读属性。
// 让id为myInput的输入框变成只读
document.getElementById('myInput').setAttribute('readonly', 'true');
// 取消只读
document.getElementById('myInput').removeAttribute('readonly');
除了setAttribute和removeAttribute,你还可以直接用DOM属性操作：
// 设置只读
document.getElementById('myInput').readOnly = true;
// 取消只读
document.getElementById('myInput').readOnly = false;
这两种方式都能达到目的,但要注意，属性名在HTML里是readonly，在JavaScript的DOM对象里却是readOnly，大小写别搞混了。
通过jQuery或现代框架操作
如果你还在用jQuery,一行代码就能搞定：
$('#myInput').prop('readonly', true);
注意用prop而不是attr,因为readonly是DOM属性，prop处理布尔属性更靠谱。
在Vue或React框架里,你只需要绑定一个布尔变量，比如Vue里这么写：
<input :readonly="isReadonly">
React里则是：
<input readOnly={isReadonly} />
业内专家指出,现代前端框架已经把这些属性操作封装得很完善，你只需要关心业务状态，不用再手动操作DOM了。
input只读属性和disabled区别有哪些？对比清楚再选
很多初学者容易把readonly和disabled搞混,因为它俩看起来都能让输入框不可编辑，但在浏览器眼里，这俩货的性格截然不同。
表单提交上的差异
这是最关键的差异,一个加了readonly的输入框，它的值会正常参与表单提交，你可以在服务端拿到用户看不到但已经预置好的数据，而加了disabled的输入框，它的值会被浏览器直接忽略，不会提交到服务端。
举个例子,你做一个订单编辑页面，订单编号既想让用户看到，又不想让他改，更希望在提交时把这个值一起发给后端，这时候你就该用readonly，而不是disabled。
样式和交互上的差异
disabled的输入框默认会变成灰色,而且鼠标悬停上去会变成禁止标志，用户一眼就能看出它不可用，readonly的输入框在视觉上几乎没有变化，用户点击它还能聚焦，也能复制里面的文字，只是改写不了。
从交互体验上说,如果你只是不想让用户改，但希望他能复制内容，那readonly会更友好，如果你压根不想让他碰这个区域，那disabled更直接。
实际场景中怎么选
我给你的建议是：需要提交值就用readonly，不需要提交就用disabled，这个原则能解决90%的困惑。
比如表单里的优惠券码,提交时要把码传给后端核销，那就用readonly，再比如一个用户协议的多行文本框，你既不想让用户改，提交时也不需要传这个值，那就用disabled。
| 对比维度 | readonly | disabled |
|---|---|---|
| 是否可编辑 | 否 | 否 |
| 是否可聚焦 | 是 | 否 |
| 是否可复制文字 | 是 | 否 |
| 值是否随表单提交 | 是 | 否 |
| 默认样式变化 | 几乎无 | 灰色+禁止光标 |
| 适合场景 | 需要提交的不可变数据 | 不需要提交的禁用区域 |
input只读属性在表单提交中的作用与坑
readonly在表单系统里的角色,相当于一个“见证者”，它不参与修改，但它的存在和值必须被记录，这种特性在很多业务逻辑里都特别有用，但用不好也有坑。
只读值会跟着表单走
你可能会遇到这种需求：用户提交表单时，后端需要知道这个数据是哪个渠道来的，这个渠道标识你不想让用户改，但又必须随表单一起提交，这时候你只需要在隐藏域里放一个只读输入框，或者直接把现有的输入框设为readonly，提交时它就会自动带上。
这个特性在国产后台管理系统里尤其常见,据行业共识，大多数中后台表单都依赖readonly来传递一些不可见的业务参数，比如租户ID、操作人ID、来源标记等。
常见坑：只读输入框的样式伪装
readonly输入框在默认情况下长得跟普通输入框一模一样,用户根本看不出它不可编辑，这会让用户产生困惑，甚至以为页面卡了，所以很多时候你需要给只读输入框加一个浅灰色背景或者边框，让用户一眼识别。
如何用只读属性实现不可编辑的展示字段
如果你只是想展示一段数据,又不想用纯文本标签破坏表单布局，那readonly就是最好的选择，你只需要把输入框设成只读，再给它加一个CSS类，让它看起来像是一段静态文本，这样既保持了表单的对齐方式，又避免了用户误改。
.input-readonly {
border: none;
background: transparent;
cursor: default;
}
把这段CSS加到只读输入框上,它看起来就像是一段普通文本，但表单提交时依然会带着它的值。
input只读属性颜色和样式怎么改？
很多人第一次用readonly都会问：为什么我的只读输入框长得跟普通输入框一样？怎么让它看起来是灰的？其实这是个CSS问题，不是readonly本身的问题。
默认样式在不同浏览器下的表现
不同浏览器对readonly的默认样式处理并不统一,有的浏览器会给你一个淡淡的灰色背景，有的则完全不变，这就导致同一个页面在不同浏览器里看起来不一样，尤其是在国内各种WebView和国产浏览器里，表现更是五花八门。
用CSS覆盖只读样式
想统一样式,你只需要用属性选择器瞄上readonly的input就行。
input[readonly] {
background-color: #f5f5f5;
color: #666;
border: 1px solid #ccc;
cursor: not-allowed;
}
如果你用的是class怎么处理？也很简单：给只读输入框加一个class，然后写这个class的样式就行，但用属性选择器有一个好处，就是你不需要改HTML结构，直接全局命中所有只读输入框，一劳永逸。
兼容性注意事项
readonly属性本身在所有浏览器里都支持,包括老掉牙的IE6，但CSS属性选择器在IE6里不支持，不过现在也没人管IE6了，你只需要关注现代浏览器和移动端浏览器就行，在移动端，给只读输入框设置样式同样有效，但要注意，有些Android浏览器在聚焦只读输入框时依然会弹起键盘，这就要靠JavaScript来额外拦截了。
关于input只读属性的高频疑问
input只读属性会影响表单校验吗？
不会,readonly只是让输入框不可编辑，它依然会参与表单校验规则，比如你给一个只读输入框加上required，它仍然会校验是否为空，如果你不想让它参与校验，用disabled会更合适，因为disabled的输入框会被校验规则自动忽略。
只读输入框在移动端会弹起键盘吗？
在绝大多数移动端浏览器里,点击readonly的输入框不会弹起键盘，因为浏览器知道它不可编辑，但确实有少数国产WebView会误判，依然弹起键盘，如果你遇到这种情况，可以在input的focus事件里用blur()方法强制失焦，或者用触摸事件拦截。
动态修改readonly属性后，输入框里的值会丢吗？
不会,readonly只是控制输入框的可编辑状态，它不会清空输入框现有的值，你尽管放心切换，值一直都在，这跟disabled也不太一样，disabled在某些浏览器里可能会触发样式重绘，但也不会丢值。
input只读属性就是这样一个安静又可靠的角色,它不抢戏，但关键时刻能帮你守住数据边界，记住今天说的核心：它能提交值，它样式可改，它不影响校验，下次再遇到表单里需要“只给看不给改”的字段，直接让readonly上场就行。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/559774.html
