【初心者向け】HTML DOM Input Search の placeholder プロパティの使い方
HTML DOM の Input Search placeholder プロパティは、検索用入力フィールド(<input type="search">)の placeholder 属性の値を取得・設定するために使用されるプロパティです。
placeholder プロパティとは?
placeholder プロパティを利用すると、ユーザーがまだ何も入力していない状態で、入力フィールドの中にヒントとなるテキストを表示できます。これにより、「何を入力すればよいのか」をユーザーに事前に伝えることが可能になります。
なお、プレースホルダーのテキストはデフォルトで薄いグレー色で表示され、value プロパティの値とは異なり、フォーム送信時にはサーバーへ送信されない点に注意してください。
構文
placeholder プロパティを設定する場合
searchObject.placeholder = text
ここで text には、検索フィールドの使い方などをユーザーに伝えるヒントとして表示したいテキストを指定します。
placeholder プロパティを取得する場合
searchObject.placeholder
値を指定せずにプロパティを参照すると、現在設定されているプレースホルダーのテキストを文字列として取得できます。
サンプルコード
以下は、Input Search の placeholder プロパティを使用した具体的な例です。ボタンをクリックすると、JavaScript によってプレースホルダーのテキストが動的に変更されます。
<!DOCTYPE html>
<html>
<body>
<h1>Search placeholder property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>下のボタンをクリックすると、上の入力フィールドのプレースホルダーテキストが変更されます。</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
function changeHolder() {
document.getElementById("SEARCH1").placeholder = "Search for the fruits here..";
}
</script>
</body>
</html>実行結果
このコードを実行すると、次のように表示されます。

続いて CHANGE ボタンをクリックすると、placeholder の値が書き換わり、入力欄に表示されるヒントテキストが「Search for the fruits here..」に変わります。

まとめ
placeholder プロパティを使えば、JavaScript から検索フィールドのヒントテキストを自由に読み書きできます。入力例や記述フォーマットの案内など、ユーザービリティ向上のためにぜひ活用してみてください。
-
HTML DOM パスワード入力フィールドのplaceholderプロパティの使い方
HTML DOM の Input Password(パスワード入力)オブジェクトにおける placeholder プロパティは、パスワード入力フィールドの placeholder 属性の値を取得・設定するために使用されます。placeholder(プレースホルダー)は、ユーザーが何も入力していない状態で入力フィールド内にヒントとなるテキストを表示する機能です。デフォルトではグレー表示され、value プロパティとは異なり、フォーム送信時にはその値が送信されない点に注意してください。構文placeholder プロパティを設定する場合の構文は以下のとおりです。passwordObject.pla
-
HTML DOM Textareaのplaceholderプロパティとは?取得・設定方法をサンプルコード付きで解説
HTML DOM の Textarea placeholder プロパティを使用すると、HTMLドキュメント内のテキストエリア(<textarea>)要素に設定された placeholder 属性の値を取得したり、変更したりすることができます。placeholder 属性は、ユーザーが入力する前にテキストエリア内に表示されるヒントテキスト(例:「お問い合わせ内容をご記入ください」など)を指定するために使われます。JavaScriptからこの値を動的に操作できるのが、このプロパティの特徴です。構文placeholder プロパティの基本的な構文は以下の通りです。1. placehol