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

この記事では、MySQL 8.0.24のインストールチュートリアルを参考までに紹介します。具体的な内...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

Nginx設定の原理と実装プロセスの詳細な説明https

Linuxユーティリティcertbotを使用してhttps証明書を生成するこのツールは Let&#...

ウェブページの読み込み速度を上げる25の方法とヒント

はじめに<br />誰もが高速インターネット接続にアクセスできるわけではありません。たと...

Linux環境でのActiveMQ導入方法の詳しい説明

この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...

jQuery の CSS スタイル属性 css() と width() の完全ガイド

目次1. css() の基本的な使用法: 1.1 CSSプロパティを取得する1.2 CSSプロパティ...

アダプティブ Web デザインを実現する方法に関する関連知識ポイントの要約

「アダプティブ Web デザイン」はどのように機能しますか?実はそれほど難しいことではありません。 ...

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorException の解決方法

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorExce...

MySQLにおけるビューの作成(CREATE VIEW)と使用制限の詳しい説明

この記事では、例を使用して、MySQL ビューの作成 (CREATE VIEW) と使用上の制限につ...

MySQL5.7 マスタースレーブ構成例の分析

MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...

nginxワーカープロセスループの実装

ワーカープロセスは、起動されると、まず自身の動作に必要な環境を初期化し、次に実行する必要があるイベン...

インデックスを設計する際の原則は何ですか? インデックスの障害を回避するにはどうすればよいでしょうか?

目次主キーインデックス頻繁にクエリされるフィールドのインデックスを作成する大きなフィールドのインデッ...

MySQL 8.0.12 のインストールと使用方法のチュートリアル

MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...

CSSアダプティブレイアウトは、サブ要素項目の全体的な中央揃えと内部項目の左揃えを実現します。

日常業務では、次のようなレイアウトに遭遇することがあります。親要素のフレーム (ブラウザのサイズに応...

Linuxでpyファイルを直接実行する方法

1. まずファイルを作成します(ファイルを配置するディレクトリにcdします) myTest.py を...