jquery聚焦文本框与扩展文本框聚焦方法


Posted in Javascript onOctober 12, 2012

光标聚焦的位置在最前面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jquery聚焦文本框 -三水点靠木</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 
<form action="http://www.baidu.com" id="cse-search-box"> 
<div> 
<input type="hidden" name="cx" value="partner-pub-7740261255677392:7064996710" /> 
<input type="hidden" name="ie" value="UTF-8" /> 
<!--文本框--><input type="text" name="q" size="25" /> 
<input type="submit" name="sa" value="搜索" /> 
</div> 
</form> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("input[name='q']").focus(); 
})</script> 
</body> 
</html>

jquery扩展文本框聚焦方法

在不同的浏览器中,一个文本框,如果只是直接给文本框设置focus(),那么光标聚焦的位置可能是在最前面。下面的代码则是给jquery扩展一个textFocus方法,用于聚焦文本框,并使光标在最后,使用$("input").textFocus()。也可以传入一个数字参数,设置光标聚焦的位置。如$("input").textFocus(2),则光标在在第二个字符后面。

(function($){ 
$.fn.textFocus=function(v){ 
var range,len,v=v===undefined?0:parseInt(v); 
this.each(function(){ 
if($.browser.msie){ 
range=this.createTextRange(); //文本框创建范围 
v===0?range.collapse(false):range.move("character",v); //范围折叠 
range.select(); //选中 
}else{ 
len=this.value.length; 
v===0?this.setSelectionRange(len,len):this.setSelectionRange(v,v); //dom直接设置选区,然后focus 
} 
this.focus(); 
}); 
return this; 
} 
})(jQuery)
Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
angular6 填坑之sdk的方法
Dec 27 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 #Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 #Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 #Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 #Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 #Javascript
js函数的延迟加载实现代码
Oct 11 #Javascript
javascript中方便增删改cookie的一个类
Oct 11 #Javascript
You might like
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
fgetcvs在linux的问题
2012/01/15 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python解决字典中的值是列表问题的方法
2013/03/04 Python
python解析xml文件实例分析
2015/05/27 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python计算列表内各元素的个数实例
2018/06/29 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
什么是岗位职责
2013/11/12 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
经典演讲稿汇总
2014/05/19 职场文书
外贸业务员求职信
2014/06/16 职场文书
小学假期安全广播稿
2014/09/28 职场文书
公务员考察材料范文
2014/12/23 职场文书
付款承诺函范文
2015/01/21 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
七年级话题作文之执着
2019/11/19 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS