我们可以对文本框进行我们需要的操作,这次我们讲解通过获取和失去焦点来改变样式。
我们现在先来解释下焦点,焦点是在页面上屏幕中闪动的的小竖线,鼠标点击可获得光标,Tab键可按照设置的Tabindex切换焦点。我们在输入密码或者数据是光标点一下,就获取了焦点 鼠标了离开时就失去了焦点。
我们先创建一个表单,HTML代码如下:
<form action= "#" method= "POST" id=" regform"> <fieldset> <legend>个人基本信息</legend> <div> <lable for="username">名称</lable> <inputs id= "username" type="text"> </div> <div> <lable for="pass">密码</lable> <inputs id="pass " type="password"> </div> <div> <lable for="msg">详细信息</lable> <textarea id="msg" ></txetarea> </div> </fieldset> </form>
当文本框获取焦点是需要添加样式,失去焦点时会变为原来的样式 这样会加大用户体验,我们有两种方法来实现,我们先用CSS来实现,代码如下:
inputs:focus .textarea:focus{ border: 1px solid #f00; background: #fcc; }
但是IE6不支持除超链接之外的:hover伪类选择符,此时我们可以用jQuery来实现功能。
我们首先在CSS中添加一个样式,类名为focus
.focus{ border: 1px solid #f00; background: #fcc; }
现在为文本添加获取和失去焦点的事件;代码如下:
$(function(){ $(":inputs").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); });
现在经过处理后 在IE6中也能达到想要的效果。我们还可以用上面的方法改变一些其他样式,比如改变文本框大小,或者background,添加高亮等,根据自己的需求即可。
相关推荐
Jquery提示层效果-用户体验比较好的哦。 (备注:鼠标移到新闻上去,会弹出一个层 里面就是新闻的标题) 页面可以直接运行。 自己在网上找了很多 代码都写的罗里吧嗦, 我这个代码简洁 体验好。
为页面标签使用bind绑定事件,使用jquery改变单行文本框的背景色
jquery案例,单行文本框内部文字提示,注册页面的提示效果
23:遍历集合 24:属性开始过滤 25:属性结尾过滤 26:组合选择 27:子元素过滤1 28:子元素过滤2 29:表单对象 30:下拉选项 31:选择器中的空格 32:表单选择器1 33:表单选择器2 34:选取单行文本框 35:统计差异 36:隔行改变...
主要介绍了jQuery中:text选择器用法,以实例形式较为详细的分析了text选择器的功能、定义及匹配单行文本框的使用技巧,需要的朋友可以参考下
单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form action=# method=post id=regFrom> 个人基本信息 名称: <input id=username type=text /> 密码: <input...
这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多...