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 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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购物车实现代码
2011/10/10 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python 私有函数的实例详解
2017/09/11 Python
简单了解什么是神经网络
2017/12/23 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
OpenCV 边缘检测
2019/07/10 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
工作自荐信
2013/12/11 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
安全生产汇报材料
2014/02/17 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
公路绿化方案
2014/05/12 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
初三英语教学反思
2016/02/15 职场文书