ホームページ  >  記事  >  ウェブフロントエンド  >  jsでテキストボックス入力を無効または有効にする方法

jsでテキストボックス入力を無効または有効にする方法

青灯夜游
青灯夜游オリジナル
2018-11-20 16:13:446974ブラウズ

テキスト ボックスの入力を無効または有効にするにはどうすればよいですか?この記事では、pure js を使ってテキストボックスの入力を無効または有効にする方法を紹介します。困っている友人は参考にしていただければ幸いです。

js でテキスト ボックスの入力を無効または有効にするのは、実際には非常に簡単です。この機能を実現するには、disabled 属性を使用するだけです。無効な属性に関する関連知識を見てみましょう。

disabled 属性は、ラジオ ボタンが無効かどうかを設定または返すために使用できます。

基本構文:

radioObject.disabled=true|false

false: テキスト ボックスの入力を有効にすることを意味します;

true: テキスト ボックスの入力を禁止することを意味します。

簡単な例を使用して、js が disabled 属性を使用してテキスト ボックスの入力を無効または有効にする方法を 紹介しましょう。

アイデア:

1) getElementById() を使用してテキスト フィールドを取得します。

2) ボタンを使用して、テキスト フィールドの入力を有効または無効にする関数を起動します。 :enable() および disable() 関数

3)enable() および disable() 関数を使用して、テキスト ボックスの無効なフィールドを 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() 関数が呼び出され、テキスト フィールドの無効な属性が設定されます。これは、このテキスト フィールドにテキストを入力できなくなり、無効になることを意味します。

[テキスト フィールドを有効にする] ボタンをクリックすると、テキスト フィールドが再び有効になり、enable() 関数を呼び出すことができ、無効な属性が false にリセットされます。

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。その他の関連ビデオ チュートリアルをお勧めします: JavaScript チュートリアル !

以上がjsでテキストボックス入力を無効または有効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。