使用js设置input标签只读 readonly 属性
Posted 京魂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用js设置input标签只读 readonly 属性相关的知识，希望对你有一定的参考价值。
先上代码：
<html> <head> <title> test </title> <meta charset="utf-8"> </head> <script language="javascript"> function setReadonly() { //document.getElementById("test").setAttribute("readOnly", true); document.getElementById("test").readOnly=true; } function readWrite() { //document.getElementById("test").setAttribute("readOnly", false); document.getElementById("test").readOnly=false; } </script> <body> <form name="addform" id="addform" method="post" action=""> <input type="text" id="test" > <input type="button" value="只读" onclick="setReadonly();"> <input type="button" value="读写" onclick="readWrite();"> </form> </body> </html>
代码挺简单的，但是这一点代码也有可能达不到预期效果。
一开始，在readWrite()函数中，我用的是注释掉的那些代码，没有用红色部分代码，结果点击“读写”按钮后，还是不可编辑。于是就改成了红色部分代码，结果再点击“读写”按钮就可以编辑了。
总结了一下，当达不到预期效果时，可以使用以下几种解决方案：
1、readonly中 将‘o’改为大写‘O’ ，即将readonly改为readOnly ；
2、将上述代码中的setReadonly()和readWrite()函数中设置readOnly读写属性的那些代码组合着全试一遍，基本就能达到预期效果了。
以上是关于使用js设置input标签只读 readonly 属性的主要内容，如果未能解决你的问题，请参考以下文章