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也能包含文件
Oct 26 Javascript
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
Smarty变量用法详解
2016/05/11 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
JS高级笔记
2011/07/13 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
维也纳通行证:Vienna PASS
2019/07/18 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
应届本科生推荐信范文
2013/12/25 职场文书
2014年度个人工作总结
2014/11/07 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python