Text Box input focus defocus style implementation code _ javascript tips-js tutorial

Text Box input focus defocus style implementation code. If you need code, refer to the pseudo class of css: focus, which can be changed first.

The html code of the text box is assumed as follows:

The Code is as follows:

Name:

Password:

Textarea:

The css code is written as follows:

Input [type = "text"]: focus, input [type = "password"]: focus, textarea: focus {border: 1px solid # f00; background: # ccc ;}
It lists the focus style of the text box, password box, and paragraph box. Add a red border and a gray background.

Is it a simple solution now? Test with a browser (Firefox, Safari, IE7). Everything is OK, but IE6.

To make IE6 equally beautiful, I can only use js. Here I will use jquery to give you an effect.

The Code is as follows:

$ (Document). ready (function (){
$ ("Input [@ type = 'text'], input [@ type = 'Password'], textarea "). focus (function () {$ (this ). css ({background: "# ccc", border: "1px solid # f00 "})});
});

Isn't jquery easy to do? It's similar to css writing!

This is just the focus state. jquery's defocus State requires you to give instructions. It's silly and naive. It will not change itself, so it will be added with the defocus state.

The Code is as follows:

$ (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 "})});
})

After defocus, the background is white and the border turns gray.

Of course, you can also use addClass and removeClass of jquery to simplify the Code:

The Code is as follows:

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

First, the input box is set to a default style. When focusing, add css "focus" to addClass, and remove css "focus" from removeClass when focusing ".

Everything is done!