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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
深入学习JavaScript对象
Oct 13 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
JS中min函数实例讲解
Feb 18 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 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
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
js a标签点击事件
2017/03/30 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python实现身份证号码解析
2015/09/01 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python set常用操作函数集锦
2017/11/15 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python根据时间获取周数代码实例
2019/09/30 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
英国医生在线预约:Top Doctors
2019/10/30 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
热爱祖国演讲稿
2014/05/04 职场文书
事业单位考察材料范文
2014/12/25 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
淮海战役观后感
2015/06/11 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android