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的一些变化

  • 相关阅读:
    SQL学习
    FOR XML PATH
    IOS学习网址
    weak nonatomic strong等介绍(ios)
    UVALive3045 POJ2000 ZOJ2345 Gold Coins
    UVA713 UVALive5539 POJ1504 ZOJ2001 Adding Reversed Numbers
    UVA713 UVALive5539 POJ1504 ZOJ2001 Adding Reversed Numbers
    UVA439 POJ2243 HDU1372 ZOJ1091 Knight Moves【BFS】
    UVA439 POJ2243 HDU1372 ZOJ1091 Knight Moves【BFS】
    UVA10905 Children's Game
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2407346.html
Copyright © 2011-2022 走看看