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 相关文章推荐
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 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
PHP中绘制图像的一些函数总结
2014/11/19 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
Python contextlib模块使用示例
2015/02/18 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python中partial()基础用法说明
2018/12/30 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
关于环保的演讲稿
2014/05/10 职场文书
中国梦团日活动总结
2014/07/07 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
九年级化学教学反思
2016/02/22 职场文书
关于感恩的作文
2019/08/26 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
解决MySQL报“too many connections“错误
2022/04/19 MySQL