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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 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在Web开发领域的优势
2006/10/09 PHP
PHP中,文件上传
2006/12/06 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
JS变量及其作用域
2017/03/29 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
python绘制热力图heatmap
2020/03/23 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
Python 中如何写注释
2020/08/28 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
市场营销专业推荐信
2013/11/03 职场文书
办理信用卡工作证明
2014/01/11 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
js实现上传图片到服务器
2021/04/11 Javascript
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL