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 相关文章推荐
js验证表单大全
Nov 25 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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中对2个数组相加的函数
2011/06/24 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
python爬虫常用的模块分析
2014/08/29 Python
python计算圆周率pi的方法
2015/07/11 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
pycharm 安装JPype的教程
2019/08/08 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
企业演讲稿范文
2013/12/28 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
离职告别感言
2015/08/04 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
小程序自定义轮播图圆点组件
2022/06/25 Javascript
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python