首頁  >  文章  >  web前端  >  js設定input文字方塊只讀

js設定input文字方塊只讀

PHP中文网
PHP中文网原創
2017-03-18 11:23:373507瀏覽

控制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框的唯讀屬性

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn