html readonly属性（html中输入框为只读状态如何设置）
本文目录
- html中输入框为只读状态如何设置
- HTML中input框的readonly属性字体颜色问题
- HTML如何禁止文本框输入
- HTML中Readonly和Disabled的区别
- js去除 html 中 input 的readOnly属性
html中输入框为只读状态如何设置
在设计网页时，有时需要将输入框设置为只读状态，即其中的内容不可，实现这种设计的方法有两种：
使用input的disable和readonly两个属性。
先来看下二者的区别：
《input type= “text “ readonly= “true “ value= “这是readonly的！ “》
《input type= “text “ disabled= “true “ value= “这是disabled的！ “》
可以看到，虽然两种都是让input的内容不能被用户，但是对于后期的美工处理就有问题了！
例如：
《style》
input
{
color:blue;
}
《/style》
只有readonly的那个文本是蓝色的！
disabled是按系统设置的disabled颜色来设置前景色的，css对其无效！
另外，readonly和disabled还有一个不同点就是，当input属性为readonly时，提交表单是可以获得input的内容。
如果是disabled则不能获得所提交的内容，返回值全部为null，所以此处需要注意。
慎用readonly和disabled，指定了disabled的表单，在submit时，不会把它的值传出去。
例如，有两个text，一个是readonly一个是disabled，submit后，只能发送那个不是disabled的。
注意地址栏的值. 要保存到本地，因为submit了，不然，看不到效果。
HTML中input框的readonly属性字体颜色问题
再加个disabled属性就变灰色了：
《input type=“text“ value=“看看是不是变灰色了“ readonly disabled /》
《input type=“text“ value=“这个是正常的，对比一下“ /》
HTML如何禁止文本框输入
js禁止文本框输入用’disabled’限制。
//HTML代码
《input type=“text“ id=“text001“ value=“123“/》
//jQuery代码
$(function(){
$(’#text001’).attr(’disabled’,true);
});
要禁止输入其实可以不用js都可以做到
input有个属性readonly是用来设置文本框为只读的
只需要添加readonly=’readonly’
就可以不让文本框输入文字了
例如《input type=’text’ readonly=’readonly’/》
HTML中Readonly和Disabled的区别
eadonly 属性规定文本区为只读。
在只读的文本区中，无法对内容进行修改，但用户可以通过 tab 键切换到该控件，选取或复制其中的内容。
可以设置 readonly 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该文本区的使用。然后，可以使用 JavaScript 来清除 readonly 属性，以使文本区变为可状态。
isabled 属性规定应该禁用 input 元素。
disabled 属性可设置或返回是否禁用单选按钮。
注释：disabled 属性无法与 《input type=“hidden“》 一起使用。
disabled 属性会让元素不能获取焦点（比如你按TAB键不能移动到具有disabled属性的元素上），而readonly是可以获得焦点的。
js去除 html 中 input 的readOnly属性
《input type=“text“ readonly id=aa》
《input type=button onclick=“document.all.aa.readOnly = false“ value=“input“》
拓展资料：
readonly 属性规定输入字段为只读。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可状态。readonly 属性可与 《input type=“text“》 或 《input type=“password“》 配合使用。
参考资料：html标签的相关知识
更多文章：
2026年10月15日 12:00
windows程序设计第五版（《WINDOWS程序设计》和《WINDOWS核心编程》的区别）
2026年10月15日 11:30
issued retroactively（FORM E上盖“ISSUED RETROACTIVELY”的问题，小女在线等待）
2026年10月15日 10:30
2026年10月15日 10:10
begin和start的区别（start与begin的区别）
2026年10月15日 09:20
vant官网中文（范特365 是韩国化妆品VANT36.5吗）
2026年10月15日 09:10
2026年10月15日 08:10
2026年10月15日 07:30
prison break（越狱（prison break）到底是在讲个什么）
2026年10月15日 06:50
c程序设计第五版教学视频（求C程序设计（第五版）谭浩强教材源代码、视频课件等电子版资料！谢谢大家！）
2026年10月15日 06:40
