HTML DOM Textarea autofocusプロパティの使い方をわかりやすく解説
HTML DOMのTextarea autofocusプロパティは、ページが読み込まれた際にテキストエリア（textarea要素）へ自動的にフォーカスを当てるかどうかを、取得および設定できるプロパティです。
構文（Syntax）
autofocusプロパティの基本的な構文は以下の通りです。
1. autofocusの値を取得する場合
object.autofocus
2. autofocusの値を設定（変更）する場合
object.autofocus = true | false
trueを設定すると自動フォーカスが有効になり、falseを設定すると無効になります。
サンプルコード
それでは、HTML DOM Textarea autofocusプロパティの具体的な使用例を見ていきましょう。以下の例では、初期状態でautofocusが有効なテキストエリアを用意し、ボタンをクリックすることでオートフォーカスを無効化しています。
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
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 autofocus Property Demo</h1>
<textarea autofocus>Hi! I'm a text area element with some dummy text.</textarea>
<button onclick="set()" class="btn">Disable Autofocus</button>
<script>
function set() {
document.querySelector("textarea").autofocus = false;
}
</script>
</body>
</html>
実行結果
ページを読み込むと、初期状態ではテキストエリアに自動的にフォーカスが当たり、カーソルが点滅していることが確認できます。
ここで「Disable Autofocus」ボタンをクリックしてみましょう。JavaScriptによってtextarea要素のautofocusプロパティがfalseに設定され、オートフォーカスが無効化されます。その結果、カーソルは表示されなくなります。
補足ポイント
- autofocusプロパティはブール値（true / false）を扱います。
- HTML側では
<textarea autofocus>のように属性として指定でき、DOM経由でも動的に切り替え可能です。 - 1つのページ内で複数の要素にautofocusを指定した場合、通常は最初に記述された要素が優先されます。
-
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