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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
如何快速上手Vuex
Feb 14 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
一棵php的类树(支持无限分类)
2006/10/09 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
php生成随机密码的几种方法
2011/01/17 PHP
学习php开源项目的源码指南
2014/12/21 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PDO::quote讲解
2019/01/29 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
详解Python中import机制
2020/09/11 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
元旦活动感言
2014/03/08 职场文书
法人代表任命书范本
2014/06/05 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
创业计划书之面包店
2019/09/17 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python