• 使用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;
            }
        }
  • 相关阅读:
    微信卡券领用中的问题
    abp的开发20180425
    typescript 接口的新认识
    Jquery构建Form表单Post提交数据的简单方法
    EF使用时异常:对一个或多个实体的验证失败。有关详细信息
    VS快捷键简单记录
    比较和排序 IComparable And IComparer
    wpf全局异常
    MailBee的简单使用
    json数据的获取(网络摘抄)
  • 原文地址:https://www.cnblogs.com/zzq-include/p/5580743.html
Copyright © 2020-2023  润新知