CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでフォーカス時に入力フィールドをクリアする方法

フォーカス時に入力フィールドをクリアするには

入力フィールドにフォーカスが当たった瞬間に、既存の値を自動的にクリアしたいケースはよくあります。例えば、あらかじめデフォルトのテキストを表示しておき、ユーザーがフィールドをクリックした時点でその値を消去するといった使い方です。

これを実現するには、HTMLのonfocus属性を使用し、フォーカスが当たったタイミングで入力値を空文字列に設定します。以下にコード例を示します。

コード例

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>フォーカス時に入力フィールドをクリアする例</h1>
<input type="text" onfocus="this.value=''" value="サンプルテキスト...">
<h2>上のフィールドをクリックすると値がクリアされます</h2>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

CSSでフォーカス時に入力フィールドをクリアする方法

初期状態では、入力フィールドに「サンプルテキスト...」という値が表示されています。

ここでフィールドをクリック（フォーカス）すると、onfocusイベントが発火し、this.value=''によって入力値が空に設定されます。その結果、フィールド内の値は次のようにクリアされます。

CSSでフォーカス時に入力フィールドをクリアする方法

補足：placeholder属性を使う方法

なお、HTML5ではplaceholder属性を使う方法も一般的です。placeholderは入力欄に薄いグレーのヒントテキストを表示し、ユーザーが入力を始めると自動的に消えるため、単なるヒント表示を目的とする場合はこちらの方が推奨されます。

<input type="text" placeholder="サンプルテキスト...">

onfocusによるクリアは、実際の値として初期テキストを保持したい場合に有効な手法です。用途に応じて使い分けるとよいでしょう。

  1. HTMLのinput type="date"の使い方を徹底解説！日付入力フィールドの実装方法

    input type=dateとは？HTMLの<input type=date>は、日付を入力するためのフォームフィールドを作成できる要素です。年・月・日を選択形式で簡単に入力できるため、誕生日や登録日など、ユーザーから日付情報を受け取りたい場面で非常に便利です。この入力タイプを使用すると、ユーザーがフィールドをクリックした際にカレンダー形式のデートピッカーが表示され、視覚的で直感的な操作により日付を選択できます。手入力による書式のばらつきも防げるため、データの一貫性が保たれる点も大きなメリットです。ブラウザ対応状況注意：かつてはFirefoxとInternet Explorerが

  2. HTMLのstep属性とは？入力フィールドで数値の間隔（ステップ）を指定する方法

    HTMLのstep属性は、入力フィールドに入力できる数値の間隔（刻み幅）を定義するための属性です。例えば、step=5と指定すると、0、5、10、15、20のように5ずつ増減する数値のみが有効な入力値として認められます。 step属性は、min属性やmax属性と組み合わせて使用することで、有効な数値の範囲を細かく制御できます。これにより、ユーザーが誤った形式のデータを入力するのを防ぎ、フォーム送信時のバリデーションが自動的に行われます。 step属性の基本的な使い方 以下のコード例では、<input type=number>にstep=5を指定しています。この場合、有効な入力値は5