HTML DOM Textarea disabledプロパティの使い方とサンプルコード
HTML DOM の Textarea disabled プロパティは、HTML ドキュメント内の textarea 要素が無効（disabled）状態かどうかを取得したり、設定したりするためのプロパティです。ユーザーの操作状況に応じてフォームの入力欄を一時的に使用不可にしたい場合などに活用できます。
構文
disabled プロパティの基本的な構文は以下の通りです。
1. disabled の値を取得する場合
object.disabled
2. disabled の値を設定する場合
object.disabled = true | false
true を指定するとテキストエリアが無効化され、false を指定すると有効な状態へ戻すことができます。
実装例
ここでは、ボタンをクリックするとテキストエリアが無効化されるシンプルなデモを紹介します。
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightseagreen;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
<body>
<h1>DOM Textarea disabled Property Demo</h1>
<textarea placeholder="Hi! I'm placeholder text of a textarea element" rows="8" cols='20'></textarea>
<button onclick="set()" class="btn">Disable Textarea</button>
<script>
function set() {
document.querySelector("textarea").disabled = true;
}
</script>
</body>
</html>
実行結果
ページを開くと、プレースホルダー付きのテキストエリアと「Disable Textarea」ボタンが表示されます。この状態ではまだテキストエリアに入力できます。
次に、「Disable Textarea」ボタンをクリックしてみましょう。JavaScript の set() 関数によって textarea 要素の disabled プロパティが true に設定されます。
その結果、テキストエリアはグレーアウトして無効化され、文字の入力や編集ができなくなります。このように disabled プロパティを使えば、JavaScript だけで動的にフォーム要素の有効・無効を切り替えられます。
-
HTML DOM TextareaのmaxLengthプロパティとは？使い方をコード例付きで解説
HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma
-
HTML DOM Textareaのrequiredプロパティとは？構文と使い方をサンプルコード付きで解説
HTML DOM の Textarea required プロパティは、HTMLドキュメント内のテキストエリア（<textarea>要素）に設定された required 属性の値を取得・変更するためのプロパティです。required 属性は、フォーム送信時に入力が必須であることを示す属性です。この属性が true に設定されている場合、テキストエリアが空のままではフォームを送信できなくなります。構文required プロパティの構文は以下のとおりです。1. required の値を取得するobject.required2. required の値を設定するobject.requir