js移动焦点到最后位置的简单方法

更新时间：2016年11月25日 10:40:24 投稿：jingxian

下面小编就为大家带来一篇js移动焦点到最后位置的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

当输入框(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移动焦点到最后位置的简单方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

TypeScript与JavaScript项目里引入MD5校验和
这篇文章主要介绍了TypeScript与JavaScript项目里引入MD5校验和，MD5校验和可以用于验证网络文件传输的完整性以及防止文件被人篡改。下文我们就一起来学习TypeScript与JavaScript项目里引入MD5校验和_MD5校验,需要的朋友可以参考一下
2022-02-02
JavaScript的兼容性与调试技巧
可能在大家使用JavaScript效果时，会碰到在各个浏览器中页面的显示效果不同，甚至报错，这就是代码的兼容性问题。本文就是主要介绍JavaScript的兼容性与调试技巧，希望对大家有所帮助
2016-11-11
JavaScript内存泄漏的处理方式
这篇文章主要介绍了JavaScript内存泄漏的处理方式，通过理论和实例结合的方式让你理解的更加透彻。
2017-11-11
JS获取IMG图片高宽的简单实例
下面小编就为大家带来一篇JS获取IMG图片高宽的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
Bootstrap栅格系统简单实现代码
这篇文章主要为大家详细介绍了Boostrap栅格系统的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
8个绝妙的JS字符串处理技巧分享
当处理JavaScript字符串时,有许多有趣的技巧可以提高你的编码效率,这篇文章将介绍一些有关JavaScript字符串的技巧,让你在字符串操作方面更加娴熟
2023-10-10
javascript打印html内容功能的方法示例
这篇文章主要介绍了javascript打印html内容的小示例，大家参考使用
2013-11-11
JS获取url参数、主域名的方法实例分析
这篇文章主要介绍了JS获取url参数、主域名的方法,结合实例形式分析了javascript针对主机域名、端口、路径名、URL参数等的相关操作技巧,需要的朋友可以参考下
2016-08-08
JavaScript中读取和保存文件实例
这篇文章主要介绍了JavaScript中读取和保存文件实例,使用HTML5 File API实现,需要的朋友可以参考下
2014-05-05
uniApp实现热更新的思路与详细过程
经常在做app的时候,会有做热更新的需求,这也是常用的更新app的一种手段,下面这篇文章主要给大家介绍了关于uniApp实现热更新的思路与详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11