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 相关文章推荐
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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中define() 与 const定义常量的区别详解
2019/06/25 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
JsRender for object语法简介
2014/10/31 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python实现猜拳游戏
2020/03/04 Python
python使用smtplib模块发送邮件
2020/12/17 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
《草虫的村落》教学反思
2014/02/16 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
检讨书模板
2015/01/29 职场文书
张丽莉观后感
2015/06/16 职场文书