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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
jQuery 源码分析笔记
2011/05/25 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
phpStorm2020 注册码
2020/09/17 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
通过实例解析Python调用json模块
2019/12/11 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
火锅店创业计划书范文
2014/02/02 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
python解析json数据
2022/04/29 Python