js移动焦点到最后位置的简单方法


Posted in Javascript onNovember 25, 2016

当输入框(input/textarea)获得焦点时,将焦点移动到最后,在某些情况下用户体验很好。网上的大部分方法都是针对IE浏览器的。

代码如下:

var el = document.getElementById('txtArticle');
var range = el.createTextRange();
range.moveStart('character', el.value.length);
range.collapse(false);
range.select();

其实可以将moveStart这行删除,因为createTextRange方法创建range后,利用collapse方法,参数为false就可以移动到最后了。collapse(true)移动光标到range的开始,collapse(false)移动光标到range的结尾。 Firefox等标准浏览器可以使用w3c的setSelectionRange方法。

代码如下:

var range, el = document.getElementById('txtPhone');
if (el.setSelectionRange) {
  el.focus();
  el.setSelectionRange(el.value.length, el.value.length)
} else {
  range = el.createTextRange();
  range.collapse(false);
  range.select();
}

注意setSelectionRange方法仅适用于input/textarea元素。其它非原生的可编辑元素的焦点移到可以利用selection对象的collapse方法,

例如:

var sel, el = document.getElementById('hint');
sel = window.getSelection();
sel.collapse(el, 1);
el.focus();

以上这篇js移动焦点到最后位置的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 #Javascript
深入浅析Vue组件开发
Nov 25 #Javascript
javascript中href和replace的比较(详解)
Nov 25 #Javascript
移动适配的几种方案(三种方案)
Nov 25 #Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 #Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 #Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 #Javascript
You might like
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python3转换html到pdf的不同解决方案
2019/03/11 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
MySQL面试题目集锦
2016/04/14 面试题
马云的职业生涯规划之路
2014/01/01 职场文书
小学后勤管理制度
2014/01/14 职场文书
学生会主席事迹材料
2014/01/28 职场文书
财务内勤岗位职责
2014/04/17 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
门市房租房协议书
2014/12/04 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server