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 ポート転送とは何ですか?何の役に立つの?

推薦する

MySQL ストアド プロシージャ、カーソル、トランザクションの例の詳細な説明

MySQL ストアド プロシージャ、カーソル、トランザクションの例の詳細な説明以下は私が作成した M...

JavaScript の toLocaleString() での時間フォーマットに関する新しいアイデア

目次1. 時刻表示に関する従来の考え方2. 時刻の書式設定 toLocaleString() Obj...

MySQL 8.0.16 Win10 zip バージョンのインストールと設定のグラフィック チュートリアル

この記事では、MySQL 8.0.16 Win10 zip版のインストールと設定のグラフィックチュー...

構造とプレゼンテーションの分離を理解するためのWeb標準の学習

Web 標準について議論するときに必ず話題になるのは、構造とプレゼンテーションを分離することの重要性...

Linux で複数のファイルの名前を一度に変更する方法

序文日常業務では、すべての jpg ファイルを bnp に変更したり、名前の 1 を one に変更...

CSS 境界線の半分または部分的に表示される実装コード

1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...

Linux で Squid プロキシ サーバーを構築するための完全な手順

序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...

独自のネイティブ JavaScript ルーターを作成する方法

目次序文導入JavaScript 履歴 API独自のネイティブJSルーティングを実装するHistor...

MYSQLの文字セット設定方法(端末の文字セット)の詳しい説明

序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...

ローカルの Windows リモート デスクトップから Alibaba Cloud Ubuntu 16.04 サーバーに接続する方法

ローカル Windows リモート デスクトップが Alibaba Cloud Ubuntu 16....

MySQL 最適化技術における Limit クエリの最適化分析

序文実際のビジネスでは、ページングは​​一般的なビジネス要件です。次に、制限クエリを使用します。制限...

MySQL データベースの大文字と小文字の区別の問題

MySQL では、データベースはデータ ディレクトリ内のディレクトリに対応します。データベース内の各...

Docker Compose を使用して Confluence を構築するチュートリアル

この記事は「Attribution 4.0 International (CC BY 4.0)」ライ...

Nginx 外部ネットワーク アクセス イントラネット サイト構成操作

背景:サイトはフロントエンドとバックエンドから分離されています: vue+springbootフロン...