首頁 > web前端 > js教程 > js怎麼禁止或啟用文字方塊輸入

js怎麼禁止或啟用文字方塊輸入

青灯夜游
發布: 2018-11-21 10:58:29
原創
7085 人瀏覽過

如何禁止或啟用文字方塊輸入?這篇文章就跟大家介紹使用純js實作禁止或啟用文字方塊輸入的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

在js中實作禁止或啟用文字方塊輸入其實很簡單,只有使用disabled 屬性就可以實作功能。讓我們來看看disabled 屬性的相關知識。

disabled 屬性可用來設定或傳回是否停用單選按鈕。

基本語法:

radioObject.disabled=true|false
登入後複製

false:表示啟用文字方塊輸入;

true:表示禁止文字方塊輸入。

下面我們透過簡單範例來介紹js如何使用disabled 屬性來實作禁止或啟用文字方塊輸入?

想法:

1)使用getElementById()取得文字欄位

2)使用按鈕激發啟用或停用文字欄位輸入的函數:enable()和disable()函數

3)利用enable()與disable()函數將文字方塊的disabled 欄位設為true或false 

實作程式碼:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>如何使用JavaScript启用或禁用输入</title>
	</head>

	<body>
		<h2>使用JavaScript启用和禁用文本字段</h2>
		<form id="registration-form">
			输入您的姓名:
			<input type="text" id="name">
		</form><br />
		<button onclick="disable()">禁用文本字段</button>
		<button onclick="enable()">启用文本字段</button>
		<script>
			function disable(){
				//
				document.getElementById("name").disabled=true;
			}

			function enable(){
				document.getElementById("name").disabled = false;
			}
		</script>

	</body>

</html>
登入後複製

運行效果:

js怎麼禁止或啟用文字方塊輸入

點擊「停用文字欄位」按鈕時,將呼叫disable()函數,文字欄位的停用屬性disabled將設為true,這表示你無法再在此文本字段中輸入文本,它將被禁用了。

點擊「啟用文字欄位」按鈕將重新啟用文字字段,它可以呼叫enable()函數,該函數將disabled屬性重設為false。

以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。更多相關影片教學推薦:JavaScript教學

以上是js怎麼禁止或啟用文字方塊輸入的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
js
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - js addClass 無效
來自於 1970-01-01 08:00:00
0
0
0
php呼叫js並取得js的回傳值問題
來自於 1970-01-01 08:00:00
0
0
0
找不到js檔案程式碼
來自於 1970-01-01 08:00:00
0
0
0
js進階教程
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板