文本框input聚焦失焦样式实现代码
文本框input聚焦失焦样式实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:首先用css的伪类:focus可以改变。文本框的html代码假设如下:复制代码代码如下:Name:Password:Textarea:css...

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

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

复制代码 代码如下:

<dl>

<dt>Name: <dt>

<dd><input type="text" /></dd>

<dt>Password: <dt>

<dd><input type="password" /></dd>

<dt>Textarea: <dt>

<dd><textarea></textarea></dd>

</dl>

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”。

一切搞定了!

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类