Heim Web-Frontend js-Tutorial 文本框input聚焦失焦样式实现代码_javascript技巧

文本框input聚焦失焦样式实现代码_javascript技巧

May 16, 2016 pm 05:49 PM
input 聚焦

首先用css的伪类:focus可以改变。

文本框的 html代码假设如下:

复制代码 代码如下:


Name:


Password:


Textarea:





css 代码这样写:

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #f00; background: #ccc; }
分别列出了文本框、密码框、还有段落框这三个input框的聚焦时候的样式。加上个红色的边框和灰色的背 景。

现在就这么简单的解决了吗?用浏览器(Firefox, Safari, IE7)来测试,一切ok,不过不支持IE6.

想 让IE6也是一样漂亮的效果只能借助接js了,这里我用jquery给大家做一个效果。
复制代码 代码如下:

$(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 solid #f00"})}).blur(function(){$(this).css({background: “#FFF”, border: “1px solid #ccc”})});
})

失焦以后背景边成白色,边框变成灰色。

当然你也可以用 jquery的addClass和removeClass来简化代码:
复制代码 代码如下:

$(document).ready(function(){
$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).addClass("focus")}).blur(function(){$(this).removeClass("focus")});
})

先 给input框给个默认样式,聚焦的时候用addClass加上css“focus”,失焦的时候在用 removeClass去掉css“focus”。

一切搞定了!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So laden Sie das Windows Spotlight-Hintergrundbild auf den PC herunter So laden Sie das Windows Spotlight-Hintergrundbild auf den PC herunter Aug 23, 2023 pm 02:06 PM

Bei Fenstern kommt die Ästhetik nie zu kurz. Von den idyllischen grünen Feldern von XP bis zum blauen, wirbelnden Design von Windows 11 erfreuen Standard-Desktop-Hintergründe seit Jahren die Benutzer. Mit Windows Spotlight haben Sie jetzt jeden Tag direkten Zugriff auf wunderschöne, beeindruckende Bilder für Ihren Sperrbildschirm und Ihr Desktop-Hintergrundbild. Leider bleiben diese Bilder nicht hängen. Wenn Sie sich in eines der Windows-Spotlight-Bilder verliebt haben, möchten Sie vielleicht wissen, wie Sie sie herunterladen können, damit Sie sie für eine Weile als Hintergrund behalten können. Hier finden Sie alles, was Sie wissen müssen. Was ist WindowsSpotlight? Window Spotlight ist ein automatischer Hintergrund-Updater, der unter Personalisierung &gt in der App „Einstellungen“ verfügbar ist

Schöne Bilder ändern sich jeden Tag! Eine vollständige Anleitung zur Fokussierung auf Desktop- und Sperrbildschirmeinstellungen in Windows 11 Schöne Bilder ändern sich jeden Tag! Eine vollständige Anleitung zur Fokussierung auf Desktop- und Sperrbildschirmeinstellungen in Windows 11 Mar 25, 2024 am 09:01 AM

Die Spotlight-Funktion von Windows 11 aktualisiert automatisch Ihre Desktop-Hintergründe, Designs und Ihren Sperrbildschirm und präsentiert Ihnen jeden Tag eine Auswahl wunderschöner Bilder von Landschaften, Städten, Tieren und mehr. Diese Bilder stammen alle aus der Bing-Suche, was nicht nur das Benutzererlebnis personalisierter macht, sondern gelegentlich auch praktische Vorschläge und Tipps auf dem Sperrbildschirm anzeigt, was den Benutzern zusätzliche Überraschungen und Hilfe bietet. Methode 1 zur Verwendung von Windows 11 Focus Desktop: Windows Focus Desktop-Hintergrund festlegen 1 Drücken Sie die Tastenkombination Windows+I, um „Einstellungen“ zu öffnen und wählen Sie „Personalisierung“ > „Hintergrund“. 2 Wählen Sie in der Dropdown-Liste „Hintergrund personalisieren“ die Option „Windows-Fokus“. Wählen Sie Windows Spotlight-Hintergrund

So implementieren Sie ein verstecktes Laravel-Eingabefeld So implementieren Sie ein verstecktes Laravel-Eingabefeld Dec 12, 2022 am 10:07 AM

So implementieren Sie das ausgeblendete Laravel-Eingabefeld: 1. Suchen und öffnen Sie die Blade-Vorlagendatei. 2. Verwenden Sie die method_field-Methode in der Blade-Vorlage, um ein ausgeblendetes Feld zu erstellen. ".

So kapseln Sie Eingabekomponenten und einheitliche Formulardaten in vue3 So kapseln Sie Eingabekomponenten und einheitliche Formulardaten in vue3 May 12, 2023 pm 03:58 PM

Vorbereitung Verwenden Sie vuecreateexample, um ein Projekt zu erstellen. Die Parameter lauten ungefähr wie folgt: Verwenden Sie native Eingaben, bei denen es sich hauptsächlich um Werte und Änderungen handelt. App.tsx lautet wie folgt: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//Wenn sich das Eingabefeld ändert, synchronisieren Sie die Daten constonInput =;return( )=>({

Detaillierte Erläuterung der Eingabefeld-Bindungsereignisse in Vue-Dokumenten Detaillierte Erläuterung der Eingabefeld-Bindungsereignisse in Vue-Dokumenten Jun 21, 2023 am 08:12 AM

Vue.js ist ein leichtes JavaScript-Framework, das einfach zu verwenden, effizient und flexibel ist. Es ist derzeit eines der beliebtesten Front-End-Frameworks. In Vue.js sind Eingabefeld-Bindungsereignisse eine sehr häufige Anforderung. In diesem Artikel werden die Eingabefeld-Bindungsereignisse im Vue-Dokument ausführlich vorgestellt. 1. Grundkonzepte In Vue.js bezieht sich das Eingabefeld-Bindungsereignis auf die Bindung des Werts des Eingabefelds an das Datenobjekt der Vue-Instanz, wodurch eine bidirektionale Bindung von Eingabe und Antwort erreicht wird. In Vue.j

Was tun, wenn beim Klicken auf das Eingabefeld kein Cursor angezeigt wird? Was tun, wenn beim Klicken auf das Eingabefeld kein Cursor angezeigt wird? Nov 24, 2023 am 09:44 AM

Lösungen zum Anklicken des Eingabefelds ohne Cursor: 1. Bestätigen Sie den Browser-Cache. 3. Aktualisieren Sie den Browser. 6. Überprüfen Sie die Eingabe Box-Eigenschaften; 7. Debuggen von JavaScript-Code; 8. Überprüfen Sie andere Elemente der Seite. 9. Berücksichtigen Sie die Browserkompatibilität.

So verwenden Sie das Wagenrücklauf-Ereignis und die Überprüfungsfunktion des Eingabefelds im Vue-Dokument So verwenden Sie das Wagenrücklauf-Ereignis und die Überprüfungsfunktion des Eingabefelds im Vue-Dokument Jun 20, 2023 am 09:13 AM

Vue ist ein beliebtes JavaScript-Frontend-Framework mit einem reaktionsfähigen Datenbindungs- und Komponentensystem im Kern. In Vue-Anwendungen ist das Eingabefeld eines der am häufigsten verwendeten UI-Elemente. Wenn der Benutzer Text eingibt, hoffen wir, auf das Wagenrücklaufereignis zu warten und die Eingabe vor dem Absenden zu validieren. In diesem Artikel werden das Eingabeereignis des Eingabefelds und die Verwendung der Überprüfungsfunktion im Vue-Dokument vorgestellt. 1. Das Wagenrücklaufereignis des Eingabefelds in Vue ist sehr einfach.

Was ist das Eingabeelement in jquery? Was ist das Eingabeelement in jquery? Jun 06, 2023 pm 02:18 PM

In jquery ist die Eingabe ein Selektor, der Formularelemente auswählt: 1. Die Eingabe wird zum Sammeln von Benutzerinformationen verwendet. Das Eingabefeld kann ein Textfeld sein Kontrollkästchen oder eine Maske. Die Textsteuerelemente, Optionsfelder, Schaltflächen usw. nach den anklickbaren Bildern und Senden-Schaltflächen usw.

See all articles