Rumah hujung hadapan web tutorial js 文本框input聚焦失焦样式实现代码_javascript技巧

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

May 16, 2016 pm 05:49 PM
input fokus

首先用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”。

一切搞定了!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk Muat Turun Imej Kertas Dinding Spotlight Windows pada PC Bagaimana untuk Muat Turun Imej Kertas Dinding Spotlight Windows pada PC Aug 23, 2023 pm 02:06 PM

Windows tidak pernah mengabaikan estetika. Daripada bidang hijau bucolic XP kepada reka bentuk berputar biru Windows 11, kertas dinding desktop lalai telah menjadi sumber kegembiraan pengguna selama bertahun-tahun. Dengan Windows Spotlight, anda kini mempunyai akses terus kepada imej yang cantik dan mengagumkan untuk skrin kunci dan kertas dinding desktop anda setiap hari. Malangnya, imej ini tidak melepak. Jika anda telah jatuh cinta dengan salah satu imej sorotan Windows, maka anda pasti ingin tahu cara memuat turunnya supaya anda boleh mengekalkannya sebagai latar belakang anda buat seketika. Ini semua yang anda perlu tahu. Apakah WindowsSpotlight? Sorotan Tetingkap ialah pengemas kini kertas dinding automatik yang tersedia daripada Pemperibadian &gt dalam apl Tetapan

Gambar cantik berubah setiap hari! Panduan lengkap untuk memfokus pada tetapan desktop dan skrin kunci dalam Windows 11 Gambar cantik berubah setiap hari! Panduan lengkap untuk memfokus pada tetapan desktop dan skrin kunci dalam Windows 11 Mar 25, 2024 am 09:01 AM

Ciri Spotlight Windows 11 mengemas kini kertas dinding desktop, tema dan skrin kunci anda secara automatik, memberikan anda pilihan gambar landskap, bandar, haiwan dan banyak lagi yang cantik setiap hari. Imej ini semuanya diperoleh daripada carian Bing, yang bukan sahaja menjadikan pengalaman pengguna lebih diperibadikan, tetapi juga kadangkala memaparkan cadangan dan petua praktikal pada skrin kunci, membawa kejutan dan bantuan tambahan kepada pengguna. Kaedah 1 untuk menggunakan Windows 11 Focus Desktop: Tetapkan Windows Focus Desktop Wallpaper 1 Tekan kekunci pintasan Windows+I untuk membuka "Tetapan" dan pilih "Pemperibadian" > "Latar Belakang". 2 Dalam senarai juntai bawah "Peribadikan latar belakang", pilih pilihan "Fokus Windows". Pilih Kertas Dinding Spotlight Windows

Bagaimana untuk melaksanakan medan tersembunyi input laravel Bagaimana untuk melaksanakan medan tersembunyi input laravel Dec 12, 2022 am 10:07 AM

Cara melaksanakan medan tersembunyi input laravel: 1. Cari dan buka fail templat Blade 2. Gunakan kaedah method_field dalam templat Blade untuk mencipta medan tersembunyi Sintaks penciptaan ialah "{{ method_field('DELETE') }} ".

Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3 Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3 May 12, 2023 pm 03:58 PM

Penyediaan Gunakan vuecreateexample untuk mencipta projek Parameternya adalah seperti berikut: gunakan input asli terutamanya nilai dan perubahan. App.tsx adalah seperti berikut: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//Apabila kotak input berubah, segerakkan data constonInput =;kembali( )=>({

Penjelasan terperinci tentang peristiwa mengikat kotak input dalam dokumen Vue Penjelasan terperinci tentang peristiwa mengikat kotak input dalam dokumen Vue Jun 21, 2023 am 08:12 AM

Vue.js ialah rangka kerja JavaScript ringan yang mudah digunakan, cekap dan fleksibel Ia merupakan salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini. Dalam Vue.js, peristiwa mengikat kotak input adalah keperluan yang sangat biasa Artikel ini akan memperkenalkan peristiwa mengikat kotak input dalam dokumen Vue secara terperinci. 1. Konsep asas Dalam Vue.js, peristiwa pengikatan kotak input merujuk kepada pengikatan nilai kotak input kepada objek data bagi contoh Vue, dengan itu mencapai pengikatan dua hala input dan respons. Dalam Vue.j

Apa yang perlu dilakukan jika tiada kursor apabila mengklik pada kotak input Apa yang perlu dilakukan jika tiada kursor apabila mengklik pada kotak input Nov 24, 2023 am 09:44 AM

Penyelesaian untuk mengklik kotak input tanpa kursor: 1. Sahkan fokus kotak input 2. Kosongkan cache penyemak imbas 4. Gunakan JavaScript 5. Semak input; sifat kotak; 7. Menyahpepijat kod JavaScript; 8. Semak elemen lain halaman;

Cara menggunakan acara pemulangan pengangkutan kotak input dan fungsi pengesahan dalam dokumen Vue Cara menggunakan acara pemulangan pengangkutan kotak input dan fungsi pengesahan dalam dokumen Vue Jun 20, 2023 am 09:13 AM

Vue ialah rangka kerja bahagian hadapan JavaScript yang popular dengan pengikatan data responsif dan sistem komponen pada terasnya. Dalam aplikasi Vue, kotak input ialah salah satu elemen UI yang paling biasa digunakan. Apabila pengguna memasukkan teks, kami berharap untuk mendengar acara pemulangan pengangkutan dan mengesahkan input sebelum menyerahkan. Artikel ini akan memperkenalkan acara masukkan kotak input dan penggunaan fungsi pengesahan dalam dokumen Vue. 1. Acara pemulangan gerabak kotak input dalam Vue Memantau peristiwa pemulangan gerabak kotak input dalam Vue adalah sangat mudah.

Apakah elemen input dalam jquery? Apakah elemen input dalam jquery? Jun 06, 2023 pm 02:18 PM

Dalam jquery, input ialah pemilih yang memilih elemen bentuk Fungsinya ialah: 1. Input digunakan untuk mengumpul maklumat pengguna Mengikut nilai atribut jenis yang berbeza, medan input mempunyai banyak bentuk kotak semak, atau topeng Kawalan teks, butang radio, butang, dsb. selepas butang Imej boleh diklik dan serah dll.

See all articles