recherche

Maison  >  Article  >  interface Web  >  js设置input文本框只读

js设置input文本框只读

PHP中文网
PHP中文网original
2017-03-18 11:23:373507parcourir

控制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框的只读属性

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript实现弹出广告功能代码Article suivant：javascript - ajax局部刷新（前端新手，ajax也是这两天刚接触，还不太懂，求指教）

Articles Liés

Voir plus