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 相关文章推荐
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
vue.js表格分页示例
Oct 18 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
详解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生成sitemap.xml地图函数
2013/11/13 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
浅谈php命令行用法
2015/02/04 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
angular5 httpclient的示例实战
2018/03/12 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python分割文件的常用方法
2014/11/01 Python
python中尾递归用法实例详解
2015/04/28 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python实现控制台打印的方法
2019/01/12 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
《花木兰》教学反思
2014/04/09 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
婚宴新娘致辞
2015/07/28 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers