defaultValueの使い方

defaultValue は、HTMLフォームのテキスト部品に初期値を設定するために使用します。このプロパティは、フォームの初期状態で定義された値を取得または設定する際に便利です。
通常、フォーム部品に入力された値は value プロパティで扱いますが、defaultValue はフォームがリセットされたときに復元される初期値を保持します。

主なポイント:

• defaultValue は読み取りおよび書き込みが可能です。
• フォームリセット時に、defaultValue に設定された値が value プロパティに戻ります。

例

// HTML: テキスト入力部品
<input type="text" id="myText" value="初期値">

// JavaScript: defaultValueの利用
let textInput = document.getElementById("myText");
console.log(textInput.defaultValue); // "初期値"

// defaultValueを変更
textInput.defaultValue = "新しい初期値";
console.log(textInput.defaultValue); // "新しい初期値"
    

selectメソッドの活用

select() メソッドは、HTMLフォームのテキスト部品で入力内容全体を選択状態にするために使用します。このメソッドを呼び出すことで、ユーザーが入力したテキストや既存の値を一括して操作する準備が整います。

主な用途:

• ユーザーが手動で入力値をコピーする際の補助。
• 入力値の即時編集を促す場合に便利。

例

// HTML: テキスト入力部品
<input type="text" id="myText" value="編集可能なテキスト">

// JavaScript: select()を利用
let textInput = document.getElementById("myText");
textInput.select(); // 全文選択
    

実践例

以下は、defaultValue と select() を組み合わせた実用例です。

// HTML
<input type="text" id="exampleText" value="Hello, World!">
<button id="resetButton">リセット</button>

// JavaScript
let inputField = document.getElementById("exampleText");
let resetButton = document.getElementById("resetButton");

// 全選択
inputField.addEventListener("focus", () => {
    inputField.select();
});

// リセットボタンで初期値に戻す
resetButton.addEventListener("click", () => {
    inputField.value = inputField.defaultValue;
});
    

応用例

フォーム操作をさらに効率化するために、defaultValue と select() を活用した複雑な例を紹介します。

// HTML
<form id="userForm">
    <input type="text" id="username" value="ユーザー名">
    <input type="password" id="password" value="パスワード">
    <button type="reset">リセット</button>
</form>

// JavaScript
let usernameField = document.getElementById("username");
let passwordField = document.getElementById("password");

// ページロード時に初期値を設定
window.addEventListener("load", () => {
    usernameField.defaultValue = "デフォルトユーザー名";
    passwordField.defaultValue = "デフォルトパスワード";
});

// フォーカス時に内容を全選択
usernameField.addEventListener("focus", () => usernameField.select());
passwordField.addEventListener("focus", () => passwordField.select());
    

これらのコードは、フォーム入力の利便性を高めるだけでなく、ユーザーエクスペリエンスを向上させます。