本文摘自PHP中文网,作者青灯夜游,侵删。
在javascript中,可以使用Checkbox对象的disabled属性来设置不可编辑,只需要设置指定元素标签的disabled属性的值为“true”即可,语法格式“元素对象.disabled=true;”。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
JavaScript-设置文本框不可编辑
我们需要首先建立一个HTML骨架,这个可以用编译器快速生成。
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
|
然后我们把基本的内容输入完成。
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type= "text" >
<input type= "button" value= "禁用" >
</body>
</html>
|
再接着就是写JavaScript事件,实现禁用功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id= "txt" type= "text" >
<input id= "btn1" type= "button" value= "禁用" >
<script>
var btn1 = document.getElementById( 'btn1' );
btn1.onclick = function () {
var txt = document.getElementById( 'txt' );
txt.disabled = true ;
}
</script>
</body>
</html>
|
优化一下:在文本框里面输入数字,点击禁用之后就不能够在文本框里面输入数字了,再接着就是写“启用”功能了。其实启用功能和禁用功能差不多,只是把“disabled = true”更改为“disabled = false”即可,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id= "txt" type= "text" >
<input id= "btn1" type= "button" value= "禁用" >
<input id= "btn2" type= "button" value= "启用" >
<script>
var btn1 = document.getElementById( 'btn1' );
btn1.onclick = function () {
var txt = document.getElementById( 'txt' );
txt.disabled = true ;
}
var btn2 = document.getElementById( 'btn2' );
btn2.onclick = function () {
var txt = document.getElementById( 'txt' );
txt.disabled = false ;
}
</script>
</body>
</html>
|
【相关推荐:javascript学习教程】
以上就是javascript怎么设置不可编辑的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript有什么用
vue是做什么的
javascript怎么强制转换成整型
javascript函数必须有返回值吗
javascript怎么判断是否是字符串
javascript可以写在body里吗
layui怎么固定表格的表头
jquery.cookie.js插件实现换肤功能
javascript与java区别是什么
javascript如何清除缓存
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript怎么设置不可编辑