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

推薦する

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...

純粋な CSS 実装 (スクリプトなし) HTML コマンド スタイルのツールチップ テキスト プロンプト効果

実行プロセスを分析します。マウスをノードに移動して、ノードにツールチップ実装を開くための識別子 (...

Ubuntu 16.04 で FTP サーバーを構築するチュートリアル

Ubuntu 16.04 FTP サーバーをビルドするftpをインストールするftp をインストール...

ubuntu20.04 上の CLion2020.1.3 での ROS のインストールと設定の詳細な説明

1. CLionをダウンロード、インストール、アクティベートするオンラインで提供されるチュートリアル...

antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)

プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に...

ウェブページ印刷細線表+ページ印刷究極の戦略

最近、クライアントのために印刷していたとき、ページのヘッダーを印刷するのではなく、表の内容だけを印刷...

Linux でジャンクファイルをエレガントに削除する方法

あなたも私と同じように、コンピューターのファイルを整然と整理し、不要なファイルを適宜削除するプログラ...

Web ページの HTML コードの説明: 順序付きリストと順序なしリスト

このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにお...

非常に便利なオープンソース Docker ツール 5 つを強くお勧めします

導入Docker コミュニティは、さまざまなユースケースを処理するのに役立つ多くのオープンソース ツ...

MySQLの使用中に発生した問題

ここでは、MySQL の使用中に発生するいくつかの問題とその解決策を示します。 sql_mode=o...

MySQLの誤操作後にbinlog2sqlを使用して素早くロールバックする方法の詳細な説明

序文日常の仕事や勉強では、データベースを操作するときに「不注意」によるミスを犯すことは避けられません...

MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例

MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例最近のプロ...

JavaScriptコールバック関数の詳細な理解

目次序文クイックレビュー: JavaScript 関数関数とは何ですか?関数を宣言する関数の呼び出し...

Dockerは起動されていないコンテナの設定情報を変更します

私が初めてdockerを使用したときは、dockerfileやdocker-composeを使用して...