ウェブページ入力ボックスのスタイルトリガー効果

ウェブページ入力ボックスのスタイルトリガー効果
<br />この例では、主に onblur と onFocus という 2 つのパラメータを取り上げます。この 2 つのパラメータはこれまでほとんど見られなかったため、Baidu はすぐに onblur はコントロールがフォーカスを失ったときに発生するイベントであり、onFocus は入力フォーカスになったときに発生するイベントであることを理解しました。この 2 つのパラメータを className と組み合わせて、スタイルシートのクラス名を直接呼び出すことができます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
「http://www.w3.org/TR/html4/loose.dtd」より
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312">
<タイトル></タイトル>
</head>
<本文>
<スタイル タイプ="text/css">
.入力1{
font-family: verdana;background-color: #EEEEEE;border-bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-size: 12px;
}
.input1-bor {
フォントファミリー:verdana;背景色:#F0F8FF;フォントサイズ: 12px;
境界線: 1px 実線 #333333;}
</スタイル>
<テーブル セル間隔=2 セルパディング=0 幅=300 境界線=0>
<tr>
<td><font class="en1">名前:</font> </td>
<td><入力サイズ=40 名前=名前 クラス="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
</td>
</tr>
<tr>
<td><font class="en1">メールアドレス:</font></td>
<td><input size=40 name=email class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"></td>
</tr>
<tr>
<td><font class="en1">ウェブサイト:</font> </td>
<td><input size=40 name=url class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
</td>
</tr>
<tr>
<td><font class="en1">トピック:</font> </td>
<td><input size=40 name=subject class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
</td>
</tr>
<tr>
<td><font class="en1">コンテンツ: </font> </td>
<td><textarea name=メッセージ 行数=5 列数=35 クラス="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"></textarea></td></tr></table>
</本文>
</html>

<<:  Vueのライブ放送機能の詳しい説明

>>:  Docker および Docker-compose のワンクリック インストール チュートリアル (オンラインとオフラインをサポート)

推薦する

JavaScript はパスワードボックスの入力検証を実装します

サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...

Linux で nginx を起動および再起動する方法

Nginx (エンジン x) は、IMAP/POP3/SMTP サービスも提供する高性能 HTTP ...

MySql 最適化のための my.ini 中国語構成スキームの詳細な説明: InnoDB、4GB メモリ、および複数のクエリ

この記事は、4G メモリ システム用の MySQL 構成ファイル ソリューションです (主に Inn...

mysql5.7 のエンコーディングを utf8mb4 に設定する方法

最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...

Reactは感情を使ってCSSコードを書く

目次導入:感情のインストール:一般的な CSS コンポーネントを追加します。既存のコンポーネントにス...

Vue で変数式セレクターを実装する方法

目次HTML構造の定義入力タグのバインディング属性入力タグはキーダウンイベントをリッスンしますli ...

MySQLデータベースのQPSとTPSの意味と計算方法

DB ベンチマーク テストを実行する場合、qps と tps はデータベースのパフォーマンスを測定す...

CSSリンクと@importの違いの詳細な説明

HTML に CSS を追加するにはどうすればいいですか? HTML で CSS を設定する方法は ...

Vuex データの永続性を実装するためのアイデアとコード

vuexとはvuex: vue.js専用に開発された状態管理ツールで、すべてのコンポーネントの状態を...

プロフェッショナルなMySQL開発設計仕様とSQL記述仕様

チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...

mysql8.0.23 msi インストールの超詳細なチュートリアル

1.MySqlをダウンロードしてインストールする公式ウェブサイトからMySqlデータベースをダウンロ...

binlog2sql と簡単なバックアップおよびリカバリを使用して mysql8.0.20 を構成するための詳細な手順

目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...

一般的なブラウザのユーザーエージェントの概要

1. 基礎知識: HTTP ヘッダー ユーザーエージェントユーザー エージェントは、ユーザー エージ...

純粋な CSS カスタム複数行省略記号の問題 (原理から実装まで)

テキストオーバーフローを表示するにはどうすればいいですか? どのようなニーズがありますか?単一行です...

React forwardRefの使い方と注意点

これまで react.forwardRef は react の高階コンポーネントには適用できませんで...