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 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル

mysql 8.0.20 winx64.zip圧縮版のインストールチュートリアルは以下のように記録さ...

Nginx サーバーで URL リンクを設定する方法

LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...

HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...

Linux の非常に詳細な gcc アップグレード プロセス

目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...

MySQLのCOUNT(*)のパフォーマンスについてお話しましょう

序文基本的に、職場のプログラマーは、count(*)、count(1)、または count(prim...

vuexの強制リフレッシュによるデータ損失問題の分析

vuex 永続状態基本原則: すべての vuex データをローカルストレージに保存し、ページが更新さ...

require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

目次問題の説明方法 1 (バックエンドが画像 URL を返す)方法 2 (フロントエンドで requ...

2017 最新バージョンの Windows インストール MySQL チュートリアル

1. まず、MySQL の公式サイトから最新バージョンの MySQL をダウンロードします。リンクを...

HTML の基礎必読 - CSS スタイルシートの包括的な理解

CSS (カスケーディング スタイル シート) は、HTML Web ページを美しくするために使用さ...

基本的な HTML ディレクトリの問題 (相対パスと絶対パスの違い)

相対パス - ファイルを参照する Web ページの場所に基づいて確立されたディレクトリ パス。そのた...

Linux オペレーティング システムに Apache サービスをインストールする方法

ダウンロードリンク:動作環境VMware 仮想マシンの CentOS 7.6セキュアCRT Xftp...

VueはPCで写真をアップロードする機能を実現

この記事の例では、PC上で写真アップロード機能を実現するためのVueの具体的なコードを参考までに共有...

複数の値を返す MySQL ストアド プロシージャ メソッドの例

この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...

MySQLデッドロックの原因と解決策

データベースは、オペレーティング システムと同様に、複数のユーザーが使用する共有リソースです。複数の...

MYSQLストアドプロシージャ、つまり一般的な論理知識のポイントの要約

MySQL ストアド プロシージャ1. ストアドプロシージャ構文(フォーマット)を作成する 区切り文...