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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 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 mssql 时间格式问题
2009/01/13 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
python控制台显示时钟的示例
2014/02/24 Python
Python中请使用isinstance()判断变量类型
2014/08/25 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Django CBV类的用法详解
2019/07/26 Python
python gdal安装与简单使用
2019/08/01 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
单位提档介绍信
2014/01/17 职场文书
维稳承诺书
2015/01/20 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
送达通知书
2015/04/25 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python开发五子棋小游戏
2022/04/28 Python