本文介绍在JavaScript中如何将input或textarea的焦点自动移动至文本末尾，以优化用户输入体验。针对IE浏览器，利用createTextRange结合moveStart或collapse方法实现；对于Firefox等标准浏览器，推荐使用w3c标准的setSelectionRange方法。此外还涵盖了对非原生可编辑元素使用selection对象collapse方法的技巧，提供完整兼容代码示例。
焦点移至末尾的需求与IE兼容方案
当输入框（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方法来实现焦点定位。
例如针对可编辑div的实现：
var sel, el = document.getElementById('hint');
sel = window.getSelection();
sel.collapse(el, 1);
el.focus();以上分享的JavaScript移动焦点到最后位置的方法，旨在为开发者提供参考，欢迎支持。