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 程序库的比较(一)之DOM功能
Apr 07 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
原生js编写焦点图效果
Dec 08 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
js实现图片360度旋转
Jan 22 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
如何用JS实现简单的数据监听
May 06 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支持页面回退的两种方法
2008/01/10 PHP
PHP print类函数使用总结
2010/06/25 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
使用python实现kNN分类算法
2019/10/16 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
任课老师推荐信范文
2013/11/24 职场文书
小学英语教学反思
2014/01/30 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
找工作求职信
2014/07/07 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS