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中的parseInt使用技巧
Sep 03 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
详解Vue底部导航栏组件
May 02 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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数组中的重复值的实现代码
2011/07/17 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python递归实现快速排序
2018/08/18 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Python字典对象实现原理详解
2019/07/01 Python
python支付宝支付示例详解
2019/08/22 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
拓展培训心得体会
2014/01/04 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
企业宣传口号
2014/06/12 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
MySQL 5.7常见数据类型
2021/07/15 MySQL
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers