HTML onfocus gain focus および onblur lose focus イベントの詳細な説明

HTML onfocus gain focus および onblur lose focus イベントの詳細な説明

HTML onfocus イベント属性

定義と使用法

onfocus 属性は、要素がフォーカスを受け取ったときにトリガーされます。

onfocus は、<input>、<select>、<a> でよく使用されます。

ヒント: onfocus 属性は onblur 属性の逆です。

注意: onfocus 属性は、<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>、<title> の各要素には適用されません。

入力フィールドにフォーカスが当たったときに関数をトリガーします。この関数は入力フィールドの背景色を変更します

<スクリプト>
関数setStyle(x)
{
document.getElementById(x).style.background="黄色";
}
</スクリプト>
</head>
<本文>
 
<p>入力フィールドにフォーカスが当たったときにトリガーされる関数。この関数は入力フィールドの背景色を変更します。 </p>
 
名: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
姓: <input type="text" id="lname" onfocus="setStyle(this.id)">
 
</本文>

HTML onblur イベント属性

定義と使用法

onblur 属性は、要素がフォーカスを失ったときにトリガーされます。

onblur は、フォーム検証コード (ユーザーがフォーム フィールドを離れたときなど) でよく使用されます。

ユーザーが入力フィールドを離れたときに検証します。

<スクリプト>
関数大文字()
{
var x = document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</スクリプト>
</head>
<本文>
 
<p>名前を入力して、フィールド外にフォーカスを移動してください:</p>
名前を入力してください(英語の文字で):<input type="text" name="fname" id="fname" onblur="upperCase()">
 
</本文> 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  mysqlはコンマに基づいてデータ行を複数の行に分割します

>>:  SSH ポート転送とは何ですか?何の役に立つの?

推薦する

Windows 10 での mysql-8.0.17-winx64 のインストール方法

1.公式サイトからダウンロードして解凍する参考: ダウンロード後、zip 圧縮ファイル (mysql...

詳細なLinuxインストールチュートリアル

(Win7 システム) VMware 仮想マシンのインストール チュートリアルVMware は仮想マ...

Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明

目次1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加する3. すべてのコード...

JS が WeChat の「クソ爆弾」機能を実装

みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました(WeCha...

Linux システムでの vim プラグインのインストールの概要

目次vimプラグインマネージャーをインストールするプラグインデモを追加プラグインを削除するには: v...

Web デザイン スキル: iframe の適応高さの問題

おそらく、この問題にまだ遭遇していない人もいるでしょうから、まずは適応高さとは何かを説明しましょう。...

Mysql binlog ログファイルが大きすぎる場合の解決策

目次1. 関連するbinlog設定2. binlogに関する詳細設定2.1 バイナリログモードの変更...

MySQL スロークエリログの役割と公開

序文MySQL スロー クエリ ログは、MySQL が提供するログ レコードの一種です。これは、応答...

Vue ユニットテストに関する予備調査

目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...

MySQL パフォーマンス ストレス ベンチマーク ツール sysbench の使い方の紹介

目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...

jQuery はラブエフェクトをクリックする

この記事では、jQueryのクリック時のラブエフェクトの具体的なコードを参考までに共有します。具体的...

Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript

目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...

MySQL マルチテーブルクエリの具体例

1. SELECT句を使用して複数のテーブルをクエリするSELECT フィールド名 FROM tab...

MySQL コマンドを使用してインデックスを作成、削除、およびクエリする方法の紹介

MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...

MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル MySQL 8.0 の新しいパスワード認証方法

この記事では、参考までにMySQL8.0.11のインストールと設定方法、およびMySQL8.0の新し...