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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
深入理解React高阶组件
Sep 28 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 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之字符串变相相减的代码
2007/03/19 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
理解JS绑定事件
2016/01/19 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python自动裁剪图像代码分享
2017/11/25 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
利用python求积分的实例
2019/07/03 Python
基于python实现学生信息管理系统
2019/11/22 Python
python标识符命名规范原理解析
2020/01/10 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Python extract及contains方法代码实例
2020/09/11 Python
python操作链表的示例代码
2020/09/27 Python
Python LMDB库的使用示例
2021/02/14 Python
市场开发与营销专业求职信
2013/12/31 职场文书
六查六看自查报告
2014/10/14 职场文书
升学宴学生答谢词
2015/01/05 职场文书
会计稽核岗位职责
2015/04/13 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Java集成swagger文档组件
2021/06/28 Java/Android