zoukankan      html  css  js  c++  java
  • Range在各浏览器下的问题和常见处理办法

    第一次听到Range这个概念是在空间编辑器的技术交流会上,当时作者给我们提到编辑器中最重要的概念就是Range,通过操作range,就可以实现编辑器的所有操作。到底具体什么是range呢,其实简单点就是选区,大家对矩形可能有概念,其实range可以理解为矩形,只要我们选定了一个文本,那么这个文本就占有空间了,所以range是有起始和结束位置的。

    一、关于浏览器的兼容性

       目前主要有3种关于range的类似的对象,分别是W3C range 对象,Mozzlia selection ,ie TextRange

      关于这三种的区别,请查看文档 http://www.quirksmode.org/dom/w3c_range.html 这里面对这三个是说的很清楚的

      可以看出 Mozilla 的 range 是一个selection对象 ,而在ie下 range 是一个 text Range 这个和Mozilla是完全不同的,所以需要为这两种类型的range

    分别写不同的兼容性的脚本,目前主流浏览器 Mozilla,chrome safari,opera 都支持 selection 对象,但是opera 也支持 IE 下text Range ,但是不全面。

    所以代码应该这样

    var selection; //申明range 对象
    if (window.getSelection) { 
      //主流的浏览器,包括mozilla,chrome,safari
    selection = window.getSelection();
    } else if (document.selection) {
    selection = document.selection.createRange();//IE浏览器下的处理,如果要获取内容,需要在selection 对象上加上text 属性
    } 

    其实判断浏览器的兼容性,我们还可以这么判断

    if (Obj.createTextRange) {
      //IE浏览器下的操作
    } else if (Obj.setSelectionRange) {

      //非IE 下的一些操作

    }

    我跟踪了下载chrome 和IE下的这些对象,上图给大家看一下

    在ie下,如果创建了range对象,那么就有 

      range.moveEnd()

      range.moveStart()

      range.select();

    可以实现选定文本的操作

    在其他浏览器下,可以通过obj.setSelectionRange() 来实现选定操作,具体格式如下

    o.setSelectionRange(start,end);

      o:为文本输入框对象

      start:为字符串的起始位置

      end:为字符串的末位置

    在鼠标的位置处,实现文本的插入操作,在ie下

    可以通过document.selection.createRange().text = value;

    其中 document.selection.createRange() 表示当前鼠标的位置的TextRange 对象, textRange.text = value表示在当前鼠标处插入值

    在其他浏览器下中可以通过 obj.value = str +value +str1  的形式

    在非ie下 对于文本框这种输入的obj,是有 selectionStart,selectionEnd属性的,表示当前鼠标的位置。

    总结:

      1)提到了range对象不在同浏览器下创建,获取文本的内容以及兼容性的问题

      2)如何通过range对象,实现文本框中的文本插入操作

      3)如何通过range对象,实现文本的选定以及光标移动操作

    欢迎大家拍砖。。

    在html4中type 被list-style-type给替代了,start 和value几乎不常用,很少看到有这样的代码,但是html5的新标准这几个属性又重新被捡回来了。

    1)个人感觉使用type 属性list-style-type 简单,也容易记忆

    下面来对应下这两个之间的关系

             type                     list-style-type             
     type="1"  decimal (默认样式)
     type="a"  lower-alpha
     type="A"  upper-alpha
     type="i"  lower-roman
     type="I"  upper-roman


    如果两个属性同时存在的话,那么list-style-type 的优先级高

    2)start与 value,就是开始的vendor,请看如下代码:

    <ol type="I" >
    <li value="5">aaaaaaaaaaaaaaaaaaaaa</li>
    <li>bbbbbbbbbbbbbbbbbbbbbb</li>
    <li>cccccccccccccccccc</li>
    <li>ddddddddddddddddddddd</li>
    <li>eeeeeeeeeeeeeeeeeeeeee</li>
    </ol>

    等同于

    <ol type="I" start="5" >
    <li >aaaaaaaaaaaaaaaaaaaaa</li>
    <li>bbbbbbbbbbbbbbbbbbbbbb</li>
    <li>cccccccccccccccccc</li>
    <li>ddddddddddddddddddddd</li>
    <li>eeeeeeeeeeeeeeeeeeeeee</li>
    </ol>

    他们表示的意思都是一样的,效果相同

    3)兼容性:

      type ,start,value 对于ie6,7,8,chrome17,firefox10 下测试都是支持的。

    html5 有序列表ol的一些变化

  • 相关阅读:
    http://caibaojian.com/jquery/ JQuery在线查询手册
    验证码
    显式提交/隐式提交 //ajax方式的隐式提交
    事物 银行转账业务
    模板 Template
    登录页面跳转与错误提示信息
    连接池 八种基本类型
    文件,文件夹的基本操作--------数据流的传输
    vim编辑器
    Linux中创建和使用静态库&动态库
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2407346.html
Copyright © 2011-2022 走看看