jQuery的单行文本框操作
我们可以对文本框进行我们需要的操作,这次我们讲解通过获取和失去焦点来改变样式。
我们现在先来解释下焦点,焦点是在页面上屏幕中闪动的的小竖线,鼠标点击可获得光标,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,添加高亮等,根据自己的需求即可。
相关推荐
donghongbz 2020-01-17
84483065 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
tztzyzyz 2020-07-05
delmarks 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
tztzyzyz 2020-05-31
81463166 2020-05-17
88570299 2020-05-17
delmarks 2020-05-17
donghongbz 2020-05-15
tztzyzyz 2020-05-15
<table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%&qu
牵手白首 2020-05-14
Chriswang 2020-04-30