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 年月日联动实现核心代码
Dec 21 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
jquery replace方法去空格
May 08 jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 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
非常好的php目录导航文件代码
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
js实现简单进度条效果
2020/03/25 Javascript
python 正则式使用心得
2009/05/07 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python通过select实现异步IO的方法
2015/06/04 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python SocketServer源码深入解读
2019/09/17 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
执行力心得体会
2013/12/31 职场文书
小学教师办公室制度
2014/02/03 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
校园活动策划方案
2014/06/13 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android