本文介绍如何在JavaScript中实现文本框失去焦点后，将光标自动定位到文本末尾。通过区分IE与非IE浏览器，分别采用focus()与createTextRange()方法解决兼容性问题，并结合ztree模糊搜索场景，优化用户交互体验。
JavaScript实现文本框光标定位至末尾的兼容方案
具体实现代码如下：
<script>
// 当输入框失去焦点后，使文本内容获得焦点，并将光标移动至最后一个字符之后
function myfocus(myid) {
if(isNav){
document.getElementById(myid).focus();// 获取焦点
}else{
setFocus.call(document.getElementById(myid));
}
}
var isNav = (window.navigator.appName.toLowerCase().indexOf("netscape")>=0);
var isIE = (window.navigator.appName.toLowerCase().indexOf("microsoft")>=0);
function setFocus() {
var range = this.createTextRange(); //建立文本选区
range.moveStart('character', this.value.length); //选区的起点移到最后去
range.collapse(true);
range.select();
}
</script>示例说明：
本示例基于ztree组件的模糊搜索功能进行演示。
在初始状态下，所有树节点均处于折叠状态。当用户输入搜索关键词并触发查询时，系统会展开包含匹配内容的父节点。此操作会导致当前input输入框失去焦点，从而影响用户体验。为解决这一问题，在父节点展开后，需要重新让input输入框获得焦点。如果仅使用focus()方法，光标会默认出现在文本框的最前端，这并非理想效果。通过调用上述封装的代码，可以实现查询后光标自动定位到已输入文字的末尾位置。