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 相关文章推荐
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
JS模拟实现京东快递单号查询
Nov 30 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 采集程序原理分析篇
2010/03/05 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
python批量制作雷达图的实现方法
2016/07/26 Python
python计算日期之间的放假日期
2018/06/05 Python
Python实现常见的回文字符串算法
2018/11/14 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python 获取等间隔的数组实例
2019/07/04 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
关于python字符串方法分类详解
2019/08/20 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
写给父母的感谢信
2015/01/22 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书