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 学习笔记 选择器之二
Jul 23 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
原生js编写焦点图效果
Dec 08 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
canvas绘制环形进度条
Feb 23 Javascript
分析JS中this引发的bug
Dec 12 Javascript
Angular简单验证功能示例
Dec 22 Javascript
JavaScript实现省份城市的三级联动
Feb 11 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
mysql建立外键
2006/11/25 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
JS获取父节点方法
2009/08/20 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
vue跨域解决方法
2017/10/15 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
JS实现分页导航效果
2020/02/19 Javascript
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python 列表反转显示的四种方法
2020/11/16 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
数控技术学生的自我评价
2014/02/15 职场文书
学生请假条
2014/04/11 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
航空学院求职信
2014/06/11 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
见习报告的格式
2014/11/04 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
春节慰问简报
2015/07/21 职场文书
新闻简讯格式及范文
2015/07/22 职场文书