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动态加载二
Aug 22 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
微信小程序日历效果
Dec 29 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
vue实现简易的双向数据绑定
Dec 29 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水印技术
2007/02/14 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
python服务器端收发请求的实现代码
2014/09/29 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python re.match()用法相关示例
2021/01/27 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
企业申诉管理制度
2014/01/30 职场文书
满月酒主持词
2014/03/27 职场文书
小学教师评语大全
2014/04/23 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
zabbix配置nginx监控的实现
2022/05/25 Servers
Redis基本数据类型List常用操作命令
2022/06/01 Redis