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

js設定input文字方塊只讀

PHP中文网
發布: 2017-03-18 11:23:37
原創
3545 人瀏覽過

控制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
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板