HTML DOM Textareaのselect()メソッドとは？使い方とサンプルコードを解説
HTML DOM の Textarea select() メソッドは、HTMLドキュメント内のテキストエリア（textarea要素）の内容をプログラムから一括選択するためのメソッドです。このメソッドを呼び出すと、ユーザーがマウスやキーボードでドラッグして選択したときと同じように、テキストエリア内のすべてのテキストが選択状態になります。
構文
select() メソッドの基本的な構文は以下のとおりです。引数は不要で、対象の textarea 要素に対してそのまま呼び出します。
object.select()
それでは、HTML DOM Textarea select() メソッドの具体的な使用例を見ていきましょう。
サンプルコード
次の例では、ボタンをクリックすると textarea 要素の内容がすべて選択される仕組みを実装しています。
<!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 select() Method Demo</h1>
<textarea rows='5' cols="30">Hi! I'm a text area element with some dummy text.</textarea>
<button onclick="set()" class="btn">Select textarea content</button>
<script>
function set() {
document.querySelector("textarea").select();
}
</script>
</body>
</html>実行結果
ページを開くと、ダミーテキストが入力されたテキストエリアと「Select textarea content」というボタンが表示されます。
このボタンをクリックすると、JavaScript の set() 関数が実行され、document.querySelector("textarea") で取得した textarea 要素に対して select() メソッドが呼び出されます。その結果、テキストエリア内の内容がすべて選択された状態になります。
ポイントまとめ
select()メソッドは、textarea 要素の内容全体を一括で選択できる。- 引数は不要で、戻り値も返らないシンプルなメソッド。
- 「コピー用テキストをワンクリックで選択させる」など、ユーザビリティ向上の場面で活用できる。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや