ie下焦点问题-临时记录

参考:https://bbs.csdn.net/topics/392184820?page=1
今天遇到的两个问题:主要是ie,以及火狐浏览器
第一:ie下输入框得到焦点,位置不正常问题,
        描述:在ie下对于可编辑框,通过事件触发获得焦点,通常情况想我没希望焦点在可编辑框的最右边。但是ie下第一次触发事件焦点(focus()事件)在最左边。
        在这里插入图片描述

通常使用:jQuery(元素关键字).focus();即可 光标会在最右边(文本末尾)

但是ie第一次会出现图上问题:解决方式:关键是只能使用BOM对象 原生即是

		
        var ob = document.getElementById("id");//第一种方式  原生的方式获取bom对象
        var len = ob.innerText.length;
        setFocus(ob, len );

		var ob1=   this.refs["dr_"+editorId+"_"+fileid];//第二中方式:基于react通过ref获取到的对象
        var len1= ob1.value;
        setFocus(ob, len1);

        function setFocus(ob, len1){
            if(ob.setSelectionRange){//非IE
                setTimeout(function(){
                    ob.setSelectionRange(len1, len1);//setSelectionRange(开始序号, 结束序号,方向);  可以设置光标锁定,或者选择出相关值
                    ob.focus();
                }, 0);
            }else if(ob.createTextRange){//IE
                var rng = ob.createTextRange();
                rng.move('character', len1);//光标设置在最后
                /*
				range.moveStart("character", 开始序号);  选择开始点
				range.moveEnd("character", 结束序号);  选择结束点     可以选择这之间的值
				*/
                rng.select();
            }
        }
		/*
			setSelectionRange参数说明
			selectionStart:第一个被选中的字符的序号(index),从0开始。
			selectionEnd:被选中的最后一个字符的前一个。换句换说,不包括index为selectionEnd的字符。
			selectionDirection:选择的方向。可选值为forward、backward或none
			*/

   通过设置选中的数据会在从而曲线设置光标位置
      setSelectionRange(非ie) bom对象的方法
      createTextRange(IE)
bom对象的方法
   主要点:核心参数是bom对象接口

第二:富文本框类内容合并问题
        描述:两个标签以及内容完全一致的情况下,自动合并内容
如:<p><a class="a_main">小白测试</a><a class="a_main">小白测试</a></p> 这个在所有浏览器中展示都正常如下:
        在这里插入图片描述                在这里插入图片描述

  1. 这时在谷歌中会展示正常,同时也不会合并标签
    在这里插入图片描述
  2. 但是ie下会合并标签<p><a class="a_main">小白测试小白测试</a></p> 会合并为这种模式
    在这里插入图片描述
    解决方式:添加属性,让每一个标签以及内容总体上不一致,如下就不会合并(我自己是加时间戳)
<p><a cc="c_1" class="a_main">小白测试</a><a cc="c_2" class="a_main">小白测试</a><a cc="c_3" class="a_main">小白测试</a></p>

以上本次遇到的问题,问题虽然不大,但是都很影响业务。


小白希望大家指导

发布了55 篇原创文章 · 获赞 29 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/ljcc122/article/details/88902809
今日推荐