js实现文本框中焦点在最后位置


Posted in Javascript onMarch 04, 2014

在一般的程序中.程序员做输入框内容正确性检测时一般喜欢通过判断内容的合法性来确定焦点框.

如:

if(obj.value==""){
   obj.focus();
   return false;
}

这样当哪一项输入框为空是就将焦点移动那一项输入框..这项功能使用起来非常方便..但是存在一个小小的问题...

那就是obj.focus()将焦点移动到输入框后,会将文字光标(就是一闪一闪的竖线)移动到这个输入框的第一个字符的位置...就上面的判断而言..如果文本框中没有内容..obj.focus正好可以满足我们直接在文本框中输入内容而不用点击一下文本框以使文本有焦点...

但是,如果文本框中已经有内容了..但是这个内容不合法.obj.focus()同样的将光标移动到了这个文本框的第一个字符的位置..这时就会让注意用户体验的设计师郁闷了...我们需要的是文本框得到焦点,然后文字光标移动到文本框的最后,让用户可以不用点击文本框直接输入内容..输入的内容会在原来的内容的后面追加起来..

下面的代码可以完成这个小细节:

<script language="javascript">
function getSelectPos(obj){
var esrc = document.getElementById(obj);
if(esrc==null){
   esrc=event.srcElement;
}
var rtextRange =esrc.createTextRange();
rtextRange.moveStart('character',esrc.value.length);
rtextRange.collapse(true);
rtextRange.select();
}
</script>

这个代码是在用户体验的细节性上会对设计师有很大的帮助...
Javascript 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
详解JavaScript 的变量
Mar 08 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 #Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 #Javascript
js 判断控件获得焦点的示例代码
Mar 04 #Javascript
Javascript中的String对象详谈
Mar 03 #Javascript
Javascript中的Array数组对象详谈
Mar 03 #Javascript
不要使用jQuery触发原生事件的方法
Mar 03 #Javascript
jquery实现点击消失的代码
Mar 03 #Javascript
You might like
完美解决PHP中文乱码
2009/11/26 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
phalcon框架使用指南
2016/02/23 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
js下弹出窗口的变通
2007/04/18 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
python 装饰器重要在哪
2021/02/14 Python
学生自我鉴定范文
2013/10/04 职场文书
毕业留言寄语大全
2014/04/10 职场文书
党员作风建设自查报告
2014/10/23 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers