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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
个人小程序接入支付解决方案
May 23 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缓冲 output_buffering的使用详解
2013/06/13 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python闭包思想与用法浅析
2018/12/27 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
建议书的格式
2014/05/12 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers