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 相关文章推荐
js中设置元素class的三种方法小结
Aug 28 Javascript
通过url查找a元素并点击
Apr 09 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
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函数常用用法小结
2010/02/08 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
python 队列详解及实例代码
2016/10/18 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
市级三好学生事迹材料
2014/08/27 职场文书
初婚未育证明样本
2014/10/24 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
六五普法心得体会2016
2016/01/21 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python