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 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
UCenter Home二次开发指南
2009/05/28 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php中文验证码实现方法
2015/06/18 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
对于Python装饰器使用的一些建议
2015/06/03 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
浅析matlab中imadjust函数
2020/02/27 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
父亲生日宴会答谢词
2014/01/10 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
广告设计应届生求职信
2014/03/01 职场文书
师德师风建设方案
2014/05/08 职场文书
房地产推广策划方案
2014/05/19 职场文书
国庆节标语大全
2014/10/08 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫