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解决图片缩放及其优化的代码
May 23 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
Vue实现多标签选择器
Nov 28 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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扩展ZF――Validate扩展
2008/01/10 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php修改时间格式的代码
2011/05/29 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP实现下载功能的代码
2012/09/29 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
php 购物车完整实现代码
2014/06/05 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
新学期校长寄语
2014/01/18 职场文书
先进集体获奖感言
2014/02/13 职场文书
小学生秋游活动方案
2014/02/23 职场文书
爱情寄语大全
2014/04/09 职场文书
原告离婚代理词
2015/05/23 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL