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快速排序算法详解
Sep 17 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
element中table高度自适应的实现
Oct 21 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逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP实现验证码校验功能
2017/11/16 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python实现linux下使用xcopy的方法
2015/06/28 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python面向对象之继承代码详解
2018/01/29 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python实现数值积分方式
2019/11/20 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
python 数据类型强制转换的总结
2021/01/25 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
几道数据库的面试题或笔试题
2014/05/31 面试题
公司活动策划方案
2014/01/13 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
个人违纪检讨书
2014/09/15 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
赢在中国观后感
2015/06/02 职场文书
毕业欢送会致辞
2015/07/29 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle