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 load Page,load css,load js实现代码
Mar 31 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
基于Vue插入视频的2种方法小结
Apr 02 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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模块 Memcached功能多于Memcache
2011/06/14 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
师德个人剖析材料
2014/02/02 职场文书
趣味比赛活动方案
2014/02/15 职场文书
电钳工人个人求职信
2014/05/10 职场文书
先进班组事迹材料
2014/12/25 职场文书
校运会班级霸气口号
2015/12/24 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
Python日志模块logging用法
2022/06/05 Python
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL
win sever 2022如何占用操作主机角色
2022/06/25 Servers