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


Posted in Javascript onSeptember 10, 2010

功能实现:
用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现。

实现原理:
在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作。
代码示例:

<html> 
<head><title></title> 
<style type="text/css"> 
.redBack{}{ 
color:white; 
background:red; 
border:2px solid black; 
} 
</style> 
<script language="javascript" src="jquery-1.1.4.js" type="text/javascript"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$('input').focus(function(){ 
$(this).addClass('redBack'); 
//alert("hello"); 
}); $('input').blur(function(){ 
$(this).removeClass('redBack'); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="text" value="hello,shanzhu" id="myText"> 
<input type="text" value="hello,shanzhu" id="myText2"> 
<input type="text" value="hello,shanzhu" id="myText3"> 
<input type="text" value="hello,shanzhu" id="myText4"> 
<input type="text" value="hello,shanzhu" id="myText5"> 
<input type="text" value="hello,shanzhu" id="myText6"> 
</body> 
</html>

根据测试的要求,在alert之后,要将光标定位到指定的位置。查阅之后发现:focus属性可以方便的做到。

alert("姓名不能为空!");

//由id定位到需要的焦点

$("#name").focus();

即在提示输出后,焦点回到输入项。类似的也可以加入对应的样式。能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现。

在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作。

Javascript 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
Vue3.0的优化总结
Oct 16 Javascript
有趣的javascript数组定义方法
Sep 10 #Javascript
心扬JS分页函数代码
Sep 10 #Javascript
JavaScript中获取元素索引的函数
Sep 10 #Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 #Javascript
一些常用且实用的原生JavaScript函数
Sep 08 #Javascript
js location.replace与location.reload的区别
Sep 08 #Javascript
js中匿名函数的N种写法
Sep 08 #Javascript
You might like
对Session和Cookie的区分与解释
2007/03/16 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python中turtle库的使用实例
2019/09/09 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
python实现扫雷游戏的示例
2020/10/20 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
运动会通讯稿400字
2014/01/28 职场文书
英语国培研修感言
2014/02/13 职场文书
优秀员工获奖感言
2014/03/01 职场文书
经典安踏广告词
2014/03/21 职场文书
《风筝》教学反思
2014/04/10 职场文书
环保倡议书范文
2014/05/12 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python