ホームページ ウェブフロントエンド jsチュートリアル テキスト ボックスの入力フォーカスとデフォーカス スタイルの実装 code_javascript スキル

テキスト ボックスの入力フォーカスとデフォーカス スタイルの実装 code_javascript スキル

May 16, 2016 pm 05:49 PM
input 集中

まず、CSS 疑似クラスを使用します。フォーカスを変更できます。

テキスト ボックスの HTML コードは次のように想定されます。

コードをコピー コードは次のとおりです。


名前:

パスワード:
テキストエリア:




CSS コードは次のように記述されます。 >
input[type="text" ]:focus, input[type="password"]:focus, textarea:focus { border: 1px Solid #f00; }
テキスト ボックス、パスワード ボックス、段落ボックスがそれぞれフォーカスされているときの 3 つの入力ボックスのスタイルが表示されます。赤い枠線と灰色の背景を追加します。

今すぐ解決するのは簡単ですか?ブラウザ (Firefox、Safari、IE7) を使用してテストします。すべて問題ありませんが、IE6 はサポートされていません。

IE6 で同じ美しい効果を得たい場合は、js を使用する必要があります。あなたのためのエフェクトを作成します。




コードをコピー
コードは次のとおりです。 $(document).ready(function( ){ $("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this). css({background:"# ccc", border:"1px Solid #f00"})} );
});


jqueryの作り方ってすごく簡単じゃないですか? cssの書き方に似てる気がします!

これは単なるフォーカス状態です。jquery のフォーカスが外れている状態では、指示を与える必要があります。それ自体では元に戻らないので、アウトオブフォーカス状態を追加します。フォーカス状態。




コードをコピー
コードは次のとおりです。 $(document).ready(function( ){ $("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).css({background:"# ccc", border: "1px ソリッド #f00"})}).blur(function(){$(this).css({background: "#FFF", border: "1px ソリッド #ccc"})});
})


デフォーカス後、背景の端は白になり、境界は灰色になります。

もちろん、jquery の addClass と RemoveClass を使用してコードを簡素化することもできます。




コードをコピーします
コードは次のとおりです: $(document).ready(function(){ $("input[@type='text'], input[@type='password'], textarea").focus (function(){$(this).addClass("focus")}).blur(function(){$(this).removeClass("focus")});
})


まず、入力ボックスにデフォルトのスタイルを与えます。フォーカスされている場合は、addClass を使用して CSS の「フォーカス」を追加します。フォーカスが外れている場合は、removeClass を使用して CSS の「フォーカス」を削除します。

すべて完了しました!
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Windows スポットライトの壁紙画像を PC にダウンロードする方法 Windows スポットライトの壁紙画像を PC にダウンロードする方法 Aug 23, 2023 pm 02:06 PM

窓は決して美観を無視するものではありません。 XP の牧歌的な緑の野原から Windows 11 の青い渦巻くデザインに至るまで、デフォルトのデスクトップの壁紙は長年にわたってユーザーの喜びの源でした。 Windows スポットライトを使用すると、ロック画面やデスクトップの壁紙に使用する美しく荘厳な画像に毎日直接アクセスできるようになります。残念ながら、これらの画像は表示されません。 Windows スポットライト画像の 1 つが気に入った場合は、その画像をダウンロードして、しばらく背景として保存できるようにする方法を知りたいと思うでしょう。知っておくべきことはすべてここにあります。 Windowsスポットライトとは何ですか? Window Spotlight は、設定アプリの [個人設定] &gt から利用できる自動壁紙アップデーターです。

美しい写真は毎日変わります! Windows 11 のデスクトップとロック画面の設定に重点を置くための完全なガイド 美しい写真は毎日変わります! Windows 11 のデスクトップとロック画面の設定に重点を置くための完全なガイド Mar 25, 2024 am 09:01 AM

Windows 11 のフォーカス機能は、デスクトップの壁紙、テーマ、ロック画面インターフェイスを自動的に更新し、風景、都市、動物などの美しい写真のセレクションを毎日表示します。これらの画像はすべて Bing 検索から取得されており、ユーザー エクスペリエンスがよりパーソナライズされるだけでなく、ロック画面に実用的な提案やヒントが時折表示され、ユーザーにさらなる驚きと助けをもたらします。 Windows 11 フォーカス デスクトップを使用する方法 1: Windows フォーカス デスクトップの壁紙を設定する 1 Windows + I ショートカット キーを押して [設定] を開き、[個人用設定] > [背景] を選択します。 2 [背景のカスタマイズ] ドロップダウン リストで、[Windows フォーカス] オプションを選択します。 Windows スポットライトの壁紙を選択します

Laravelの入力隠しフィールドを実装する方法 Laravelの入力隠しフィールドを実装する方法 Dec 12, 2022 am 10:07 AM

laravel入力の隠しフィールドを実装する方法: 1. Bladeテンプレートファイルを見つけて開きます; 2. Bladeテンプレートのmethod_fieldメソッドを使用して隠しフィールドを作成します。作成構文は「{{ method_field('DELETE') }}」です。 」。

vue3 で入力コンポーネントと統合フォームデータをカプセル化する方法 vue3 で入力コンポーネントと統合フォームデータをカプセル化する方法 May 12, 2023 pm 03:58 PM

準備 vuecreateexample を使用してプロジェクトを作成します パラメーターは大まかに以下のとおりです ネイティブ入力を使用します ネイティブ入力は主に値と変更です 変更する場合はデータを同期する必要がありますApp.tsx は次のとおりです: import{ref}from'vue';exportdefault{setup(){//username はデータです constusername=ref('Zhang San');//入力ボックスが変更されると、データを同期します constonInput =;return( )=>({

Vue ドキュメントの入力ボックス バインディング イベントの詳細な説明 Vue ドキュメントの入力ボックス バインディング イベントの詳細な説明 Jun 21, 2023 am 08:12 AM

Vue.js は、使いやすく、効率的で柔軟な軽量の JavaScript フレームワークで、現在最も人気のあるフロントエンド フレームワークの 1 つです。 Vue.js では、入力ボックス バインディング イベントは非常に一般的な要件です。この記事では、Vue ドキュメントの入力ボックス バインディング イベントについて詳しく紹介します。 1. 基本概念 Vue.js では、入力ボックス バインディング イベントとは、入力ボックスの値を Vue インスタンスのデータ オブジェクトにバインドすることを指し、これにより入力と応答の双方向のバインドが実現されます。 Vue.j で

入力ボックスをクリックしたときにカーソルが表示されない場合の対処方法 入力ボックスをクリックしたときにカーソルが表示されない場合の対処方法 Nov 24, 2023 am 09:44 AM

カーソルなしで入力ボックスをクリックする場合の解決策: 1. 入力ボックスのフォーカスを確認する; 2. ブラウザのキャッシュをクリアする; 3. ブラウザを更新する; 4. JavaScript を使用する; 5. ハードウェア デバイスを確認する; 6. 入力を確認するボックスのプロパティ; 7. JavaScript コードをデバッグする; 8. ページの他の要素を確認する; 9. ブラウザーの互換性を考慮する。

Vue ドキュメントで入力ボックスのキャリッジ リターン イベントと検証機能を使用する方法 Vue ドキュメントで入力ボックスのキャリッジ リターン イベントと検証機能を使用する方法 Jun 20, 2023 am 09:13 AM

Vue は、応答性の高いデータ バインディングとコンポーネント システムを中核とする人気のある JavaScript フロントエンド フレームワークです。 Vue アプリケーションでは、入力ボックスは最も一般的に使用される UI 要素の 1 つです。ユーザーがテキストを入力するとき、復帰イベントをリッスンし、送信する前に入力を検証したいと考えています。この記事では、Vue ドキュメントでの入力ボックスの Enter イベントと検証関数の使用法を紹介します。 1. Vue の入力ボックスのキャリッジ リターン イベント Vue で入力ボックスのキャリッジ リターン イベントを監視するのは非常に簡単です。

jqueryのinput要素とは何ですか? jqueryのinput要素とは何ですか? Jun 06, 2023 pm 02:18 PM

jquery では、input はフォーム要素を選択するセレクターです。その機能は次のとおりです: 1. input はユーザー情報を収集するために使用されます。さまざまな type 属性値に従って、入力フィールドには多くのフォームがあります。入力フィールドはテキスト フィールド、チェックボックス、マスク、クリック可能な画像や送信ボタンの後のテキストコントロール、ラジオボタン、ボタンなど。

See all articles