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数字和字符串转换示例
Mar 26 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
移动端js图片查看器
Nov 17 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
基于JS实现快速读取TXT文件
Aug 25 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
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
列表内容的选择
2006/06/30 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
js实现聊天对话框
2020/02/08 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
详解python中递归函数
2019/04/16 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python读取csv文件实例解析
2019/12/30 Python
Python生成词云的实现代码
2020/01/14 Python
python如何建立全零数组
2020/07/19 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
小学课外活动总结
2014/07/09 职场文书
公司离职证明标准范本
2014/10/05 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
护士个人年度总结范文
2015/02/13 职场文书
自考生自我评价
2019/06/21 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
opencv检测动态物体的实现
2021/07/21 Python