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 相关文章推荐
javascript 拖动表格行实现代码
May 05 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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遍历删除整个目录及文件的方法
2015/03/13 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
vue实现购物车加减
2020/05/30 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
Python读写Excel文件方法介绍
2014/11/22 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python过滤列表用法实例分析
2016/04/29 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python读写csv文件的方法
2019/08/13 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
python 6行代码制作月历生成器
2020/09/18 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
我的小天地教学反思
2014/04/30 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
沈阳故宫导游词
2015/01/31 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
暂住证明怎么写
2015/06/19 职场文书
纪委立案决定书
2015/06/24 职场文书
高三英语教学反思
2016/03/03 职场文书
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers