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基础上的超强GridView展示
Sep 18 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
Sep 01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
python最长回文串算法
2018/06/04 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
通过实例解析Python调用json模块
2019/12/11 Python
如何在Python对Excel进行读取
2020/06/04 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
护士节策划方案
2014/05/19 职场文书
企业文化宣传标语
2014/06/09 职场文书
销售队伍口号
2014/06/11 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
优秀员工事迹材料
2014/12/20 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
导游词之太原天龙山
2020/01/02 职场文书