首页 > web前端 > js教程 > js设置input文本框只读

js设置input文本框只读

PHP中文网
发布: 2017-03-18 11:23:37
原创
3529 人浏览过

控制input框只读可以防止用户对数据的更改,在某些情况下还是比较实用的,下面使用js来完成这个只读实现

<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" 
content=""> 
<meta name="Keywords" content=""> 
<meta 
name="Description" content=""> 
</head> 
<script 
language="JavaScript"> 
function isreadonly(){ 
var obj = 
document.getElementById("username"); 
obj.setAttribute("readOnly",true); 
obj.style.backgroundColor="#d2d2d2"; 
} 
function readwrite(){ 
var 
obj = document.getElementById("username"); 
obj.setAttribute("readOnly",false); 
obj.style.backgroundColor="#ffffff"; 
} 
</script> 
<body> 
<form name="addform" 
id="addform" method="post" action="" > 
<input type="text" 
id="username" name="username"> 
<input type="button" name="只读" 
value="read" onclick="isreadonly();"> 
<input type="button" name="可写" 
value="write" onclick="readwrite();"> 
</form> 
</body> 
</html> 
<!-- 
点击“read”按钮,input框不能书写,且变灰;点击“write”按钮,input框恢复。 
-->
登录后复制

以上就是js设置input文本框只读的详细内容,更多请关注php中文网其它相关文章!

相关文章:

通过js设置所有form对象为只读

处理表单使input等文本框为只读不可编辑的方法

使用js动态控制input框的只读属性

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板