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的Function详细
Nov 14 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
js取得url地址参数实例
Feb 22 Javascript
js获取页面description的方法
May 21 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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学习资源和链接.
2006/12/05 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
解决Python传递中文参数的问题
2015/08/04 Python
Python全排列操作实例分析
2018/07/24 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
护士实习自我鉴定
2013/10/22 职场文书
物业品质提升方案
2014/06/08 职场文书
班级标语大全
2014/06/21 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
学校证明范文
2015/06/24 职场文书
高中同学会致辞
2015/08/01 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS