回覆列表
-
1 # 既往不咎886
-
2 # 奮鬥小生阿彪
1
/7
新建一個html檔案，命名為test.html，用於講解用JS實現改變文字框的只讀屬性。
2
/7
在test.html檔案中，使用input標籤建立一個文字輸入框，程式碼如下：
3
/7
在test.html檔案中，使用readonly="readonly"設定input文字框只讀，不可更改。
4
/7
在test.html檔案中，建立一個button按鈕，用於點選按鈕時，實現改變文字框的只讀屬性。
5
/7
在test.html檔案中，給button按鈕繫結onclick點選事件，當按鈕被點選時，執行gb函式。
6
/7
在js標籤中，建立一個gb函式，在函式內，透過文字框id獲得物件，設定readOnly屬性為false,即關閉input文字框的只讀屬性。
7
/7
在瀏覽器開啟test.html檔案，點選按鈕，清除文字框只讀屬性，更改文字框的文字。
用js程式碼控制input框只讀可以防止使用者對資料的更改，有些情況下很實用。
例子：
複製程式碼 程式碼示例:
<html>
<head>
<title>js控制input框只讀_www.jquerycn.cn</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框恢復。