非表示のフォームテキストを表示するJavaScript

この記事では、フォームの隠しテキストを表示するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

実装のアイデア

onfocus および onblurイベントを使用する

onfocus -フォーカスを取得します (マウスが入力ボックスをクリックすると、入力ボックス内に点滅するカーソルが表示されます)

onblur - -フォーカスの喪失（入力ボックスでマウスが選択されず、入力ボックス内の点滅カーソルが失われます）

1.入力ボックスのデフォルト値を設定する

2. 入力ボックスオブジェクトを取得し、イベントをバインドします: onfocus と onblur
フォーカスを取得したとき (onfocus) - 入力ボックスの値が既定値かどうかを判断します。既定初期値の場合は、値を空に変更すると、既定初期値は消え、独自の値を入力できます。フォーカスを解除したとき (onblur) - 入力ボックスの値に値がないかどうかを判断します。そうでない場合は、値に既定値を割り当てます。未入力のコンテンツが移動された後、既定値が再び表示されます。

3. フォーカス状態とフォーカス喪失状態に異なるテキスト色を設定して、2 つの状態をより明確に区別することもできます。

例1:

コード：

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>フォーカスを得る/失う</title>
    <スタイル>
        入力{
            色: #ccc;
            アウトライン: なし;
        }
    </スタイル>
</head>

<本文>
    <input type="text" value="モバイル">
    <スクリプト>
        var テキスト = document.querySelector('input');
        text.onfocus = 関数() {
            if (this.value === '携帯電話') {
                this.value = '';
            }
            this.style.color = '#333';
        }

        text.onblur = 関数() {
            if (this.value === '') {
                this.value = '携帯電話';
            }
            this.style.color = '#ccc';
        }
    </スクリプト>
</本文>

</html>

ページ効果:

例2

コード：

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ユーザー名の表示/非表示</title>
    <スタイル>
        入力{
            フォントサイズ: 14px;
            色: #999;
            アウトライン: なし;
            パディング: 3px 0 3px 10px;
            境界線: 1px 実線 #ccc;
        }
    </スタイル>
</head>

<本文>
    <!--ユーザー名には非表示のコンテンツが表示されます-->
    <input type="text" value="メールアドレス/ID/電話番号" class="userName">
    <スクリプト>
        var ユーザー名 = document.querySelector('.userName');
        ユーザー名.onfocus = 関数() {
            if (this.value === 'メールアドレス/ID/電話番号') {
                this.value = '';
                this.style.borderColor = 'ピンク';
            } それ以外 {
                this.style.borderColor = 'ピンク';
                this.style.color = '#999';
            }
        }
        ユーザー名.onblur = 関数() {
            if (this.value === '') {
                this.value = 'メールアドレス/ID/電話番号';
                this.style.borderColor = '#ccc';
                this.style.color = '#999';
            } それ以外 {
                this.style.borderColor = '#ccc';
                this.style.color = '#333';
            }
        }
    </スクリプト>
</本文>

</html>

ページ効果: