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

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

一切搞定了！

赞 (0)

相关推荐

  • jQuery文本框(input textare)事件绑定方法教程

    目前1.7以上,jquery​的事件绑定已经用on替换了原来的bind,接下来为大家介绍下bind的使用方法及input textare事件,感兴趣的朋友可以参考下 (1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind: 区别:(个人理解)bind是一次绑定事件到每一个子节点:on是只绑定到父节点,然后冒泡到各个子节点: 用法:bind 一个事件,一个方法:$(".class input").bind('click',function(e)

  • Input文本框随着输入内容多少自动延伸的实现

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • JS获取及设置TextArea或input文本框选择文本位置的方法

    本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法.分享给大家供大家参考.具体实现方法如下: function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ) return el.selectionStart else if ( document.selection ) { // IE range = document.selection.createR

  • 文本框(input)获取焦点(onfocus)时样式改变的示例代码

    摘要:许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果.其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可.本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了. 许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果.其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可.本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他

  • 捕获input文本框内容改变事件的js代码

    网上一位老兄采用如此方法: readonly :是文本框不可输入. function dochg(){ document.getElementById("testId").value = "test" } setTimeout("dochg()",1000) function showValue(obj){ alert("changed value is " + obj); } [Ctrl+A 全选 注:如需引入外部Js需刷新

  • input文本框样式代码实例

    通过css来更改所有的form的样式的方法,可以在css中定义input{color:red}textarea{border:1px solid #333}这样的格式,一般如果不需要更改所有的文本样式,可以通过下面的方法来定义文本框和密码框等样式 新建网页 1 用户名: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js实现文本框宽度自适应文本宽度的方法

    js实现文本框宽度自适应文本宽度的方法

    本文实例讲述了js实现文本框宽度自适应文本宽度的方法.分享给大家供大家参考.具体如下: 一个会随着输入文本框的字符多少而自动增加宽度的JS代码,当我们在文本框中输入字符的时候,如果文本框的宽度定义太小的话,那么我们输入的字符将会被隐藏,本段代码实现了文本框会自动适应输入文字的多少,它会自动加长. 运行效果如下图所示: 具体代码如下: <!Doctype HTML PUBLIC "-//W3c//DTD Html 1.0 Transitional//EN"> <html

  • JS input文本框禁用右键和复制粘贴功能的代码

    复制代码 代码如下: function click(e) { if (document.all) { if (event.button==1||event.button==2||event.button==3) { oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { docume

  • jQuery简单实现input文本框内灰色提示文本效果的方法

    本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法.分享给大家供大家参考,具体如下: $(function(){ $(".grayTips").each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$.trim(objTextBox.val()); objTextBox.css("color","#888"); objTextBox.focus(fun

  • 文本框input聚焦失焦样式实现代码

    首先用css的伪类:focus可以改变. 文本框的 html代码假设如下: 复制代码 代码如下: <dl> <dt>Name: <dt> <dd><input type="text" /></dd> <dt>Password: <dt> <dd><input type="password" /></dd> <dt>Texta

  • 文本框只能输入数字的js代码(含小数点)

    只能输入0-9多包括小数点 <html> <head> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <title>js 只能输入数字和小数点</title> <script language="JavaScript" type="text/javascript">

  • JavaScript实现焦点进入文本框内关闭输入法的核心代码

    js实现焦点进入文本框内关闭输入法:imeMode 要用到的东西: imeMode:xxx 有四个参数 active 代表输入法为中文 inactive 代表输入法为英文 auto 代表打开输入法 (默认) disable 代表关闭输入法 <INPUT onfocus=" this.style.imeMode='active' " /> <INPUT onfocus=" this.style.imeMode='inactive' " /> &

  • javascript实现富文本框选中对齐的思路与代码

    javascript实现富文本框选中对齐的思路与代码

    目录 需求: 分析需求: 1如何获取选中的部分 * 2什么是块元素 3末梢元素(没有子节点的元素) 实现思路: 代码实现: 总结 需求: 一个可编辑(contenteditable=true)的div,对齐选中内容,左.中,右 ,其实质是:对选中的末梢节点,找到块属性的父元素,设置text-algin:center: MDN:text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐.text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐. 分析需求: 我

  • jquery关于页面焦点的定位(文本框获取焦点时改变样式 )

    功能实现: 用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现. 实现原理: 在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作. 代码示例: 复制代码 代码如下: <html> <head><title></title> <style type="text/css"> .redBack{}{ color:white

  • Android文本框搜索和清空效果实现代码及简要概述

    Android文本框搜索和清空效果实现代码及简要概述

    前言 本文实现的效果:文本框输入为空时显示输入的图标;不为空时显示清空的图标,此时点击清空图标能清空文本框内输入文字. 正文 一.实现效果 二.实现代码 绑定事件 复制代码 代码如下: private Drawable mIconSearchDefault; // 搜索文本框默认图标 private Drawable mIconSearchClear; // 搜索文本框清除文本内容图标 @Override protected void onCreate(Bundle savedInstanceS

  • asp中向文本框输出数据原样式的函数

    从数据库输出信息时有转换函数,可以将回车空格按原样式输出.这段代码可向文本框原样输出代码. 复制代码 代码如下: Function cc_f_textarea_html_encode(cc_f_t_h_e_str)  If Not IsNull(cc_f_t_h_e_str) And cc_f_t_h_e_str <> "" Then  cc_f_t_h_e_str = Replace(cc_f_t_h_e_str, ">", ">

随机推荐