使用js设置input标签只读 readonly 属性

摘要:
首先,在readWrite()函数中,我使用了注释代码,但没有使用红色代码。因此,单击“读写”按钮后,它仍然不可编辑。综上所述,当未达到预期效果时,可以使用以下解决方案:1.将readOnly中的“o”更改为大写“o”,即将readOnly更改为readOnly;2.结合上述代码中的setReadonly()和readWrite()函数来设置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"   method="post" action="">
        <input type="text"   >
        <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 属性》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇charles 手机证书下载安装Linux下源码安装xz的方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【JS】使用变量作为object的key-方法汇总

1、方法一 1 var a = 'id'; 2 var str = '{'+a+' : 12}' 3 var obj = eval("("+str+")"); 结果: 1 obj={id:12} 2、方法二 1 var a='name'; 2 var obj={}; 3 obj[a]='jack'; 结果: 1 obj={name:'jack'}...

Android Exception 10(server)' ~ Channel is unrecoverably broken and will be disposed!)

08-11 19:22:35.028: W/MemoryDealer(2123): madvise(0x43e16000, 12288, MADV_REMOVE) returned Operation not supported on transport endpoint08-11 19:22:35.038: W/InputDispatcher(2714)...

qtopia 文件系统启动过程分析

嵌入式学习入门http://blog.chinaunix.net/u3/117680/showart.php?id=2300212 虽然root_qtopia这个文件系统的GUI是基于Qtopia的,但其初始化启动过程却是由大部分由busybox完成,Qtopia(qpe)只是在启动的最后阶段被开启。 由于默认的内核命令行上有init=/linuxrc,...

vue filter 去掉HTML标签

Vue.filter('removeHtml', input => { return input && input.replace(/<(?:.| )*?>/gm, '') .replace(/(&rdquo;)/g, '"') .replace(/&ldquo;/g, '"')...

移动端解决input被输入法挡住的问题

有过移动端web开发经验的人应该都会遇到这个问题,一个input在页面最底部或者偏下的位置,输入时由于输入法的弹出,在部分浏览器下由于不会自动计算window的高度,导致input被输入法挡住。本文的解决方式是利用scrollTop来解决,在input获取焦点后,动态地设置body的高度并设置scrollTop到指定位置,这样可以保证input会滚动到输入...

filter_input() 函数

定义和用法 filter_input() 函数从脚本外部获取输入,并进行过滤。 本函数用于对来自非安全来源的变量进行验证,比如用户的输入。 本函数可从各种来源获取输入: INPUT_GET INPUT_POST INPUT_COOKIE INPUT_ENV INPUT_SERVER INPUT_SESSION (Not yet implemented)...