使用Dom的Range对象处理chrome和IE文本光标位置

有这样一段js:

   var sel = obj.createTextRange();
            sel.move('character', num);
            sel.collapse();
            sel.select();

那么在IE中是没有问题的,如:textArea它是可以创建出createTextRange对象的。那么下面的三句就是让当前的鼠标“光标”停留在num的位置(可以查询相关的资料)。这段代码你可选择在click中去触发。

也可以在focus中触发,这个时机你可以自己控制。

同样的效果在chrome中可以使用:

obj.selectionStart = obj.selectionEnd = num;

来设置光标的位置,当然chrom中是不支持createTextRange方法的,当然也有其它的方式去实现,这里不做介绍。。。

那么问题来了,如果你选择在HTML元素的click事件中去触发那么你是幸运的,可以做到和IE的效果没有任何的不同。但如果你一定要在focus中去触发,那么完蛋了,该发生的效果并没有发生!

经过尝试之后还是十分幸运的,我们可以绕过这个问题。浏览器在处理focus和click事件时的顺序是,先触发focus后出发click。那么我们就可以配合这两个方法去间接实现这个过程了。

提供简单的代码供参考:

var focusStart = 0;
    document.getElementById('textArea的id').onclick = function () {
        if (focusStart) {
            moveEnd(this);
            focusStart = 0;
        }
    }
    document.getElementById('textArea的id').onfocus = function () {
        if (document.selection) {
            moveEnd(this);
        } else {
            focusStart = 1;
        }
    }
    function moveEnd(obj) {
        var len = obj.value.length;
        if (document.selection) {
            var sel = obj.createTextRange();
            sel.moveStart('character', len);
            sel.collapse();
            sel.select();
        } else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
            obj.focus();
            obj.selectionStart = obj.selectionEnd = len;
        }
    }
原文地址:https://www.cnblogs.com/zzq-include/p/5580743.html