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+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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个人网站架设连环讲(四)
2006/10/09 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
Laravel框架表单验证详解
2014/09/04 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python 探针的实现原理
2016/04/23 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Django对models里的objects的使用详解
2019/08/17 Python
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
军训自我鉴定
2014/01/22 职场文书
网络书店创业计划书
2014/02/07 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
修辞手法有哪些?
2019/08/29 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
redis内存空间效率问题的深入探究
2021/05/17 Redis
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库