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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
Js四则运算函数代码
Jul 21 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
Three.js快速入门教程
Sep 09 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
详细分析React 表单与事件
Jul 08 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
JS实现拖动模糊框特效
Aug 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php编写一个简单的路由类
2011/04/13 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
纯js简单日历实现代码
2013/10/05 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python读大数据txt
2016/03/28 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python开头的coding设置方法
2019/08/08 Python
python中取绝对值简单方法总结
2020/07/24 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
社团活动总结格式
2014/08/29 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
山楂树之恋观后感
2015/06/11 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
中学政教处工作总结
2015/08/13 职场文书
会议主持词通用版
2019/04/02 职场文书
Go 语言结构实例分析
2021/07/04 Golang
Python anaconda安装库命令详解
2021/10/16 Python