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 相关文章推荐
jQuery 性能优化手册 推荐
Feb 23 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
element tree树形组件回显数据问题解决
Aug 14 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
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
javascript测试题练习代码
2012/10/10 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
PyMongo安装使用笔记
2015/04/27 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python 公共方法汇总解析
2019/09/16 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
村庄绿化方案
2014/05/07 职场文书
2014年医务科工作总结
2014/12/18 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js