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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
javascript replace方法与正则表达式
Feb 19 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
JavaScript定时器使用方法详解
Mar 26 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去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python将ansible配置转为json格式实例代码
2017/05/15 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
django实现类似触发器的功能
2019/11/15 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
超市客服工作职责
2014/06/11 职场文书
学习普通话的体会
2014/11/07 职场文书
文艺节目主持词
2015/07/06 职场文书
清明节随笔
2015/08/15 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL