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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
javascript iframe跨域详解
Oct 26 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
微信小程序canvas动态时钟
Oct 22 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
日本十大惊悚动漫
2020/03/04 日漫
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
php模板原理讲解
2013/11/13 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Python 实现微信自动回复的方法
2020/09/11 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
小学评语大全
2014/04/22 职场文书
HR求职自荐信范文
2014/06/21 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
毕业生学校组织意见
2015/06/04 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏