代码之家 › 专栏 › 技术社区 › Juriy

Firefox选择文本范围

selection firefox javascript

Juriy · 技术社区 · 14 年前

一个简单的问题:如何在Firefox中通过编程选择页面的文本片段?例如,有一段文字,用户单击按钮,选择10到15之间的符号,就像用户以常规方式拖动鼠标一样。

2 回复 | 直到 14 年前

Marcel Korpel 14 年前

在Firefox中,您可以使用 Range 对象,由指定 W3C .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">   
    <title>Range test</title>
    <style>   
        #trigger { background: lightgreen }
    </style>                 
  </head>                    
  <body>                     
    <p id="test">This is some (rather short) text.</p>
    <span id="trigger">â Click here! â</span>
      <!-- Yes, I know, âClick here!â is an evil message -->
    <script>
var testCase = function () {
    var userSelection;

    if (window.getSelection) {  // W3C default
        userSelection = window.getSelection();
    }  // an extra branch would be necessary if you want to support IE

    var textNode = document.getElementById('test').firstChild;
    var theRange = document.createRange();

    // select 10thâ15th character (counting starts at 0)
    theRange.setStart(textNode, 9);
    theRange.setEnd(textNode, 14);

    // set user selection    
    userSelection.addRange(theRange);
};

window.onload = function () {
    var el = document.getElementById('trigger');
    el.onclick = testCase;
};
    </script>
  </body>
</html>

请注意,您必须 TextNode 设置选择,即 firstChild 的 <p> 元素。还要注意这个例子 不会工作 在IE中,您必须使用一些专有的方法。很好的介绍正在进行中 QuirksMode .

jimbo 14 年前

我不确定是否有一种方法可以对任意的DOM元素(如段落)执行此操作,但对于文本区域元素,我相信您需要使用 selectionStart 和 selectionEnd 属性并指定开始和结束位置。

var textarea = document.getElementsByTagName('textarea')[0];
textarea.selectionStart = 10;
textarea.selectionEnd = 15;

希望这有帮助!

推荐文章

ajai.s · 根据用户偏好改变网络a帧中的化身

2 年前

Samy Mostakim · chrome正常工作,但firefox给我这个erorr

3 年前

NobleUplift · 如何修复waitforkeyements的黑客版本中的无限循环?

6 年前

palak · 组织。openqa。硒。firefox。NotConnectedException:在使用GeckoDriver和Firefox执行代码时,无法连接到主机127.0.0.1

6 年前

Nick Evans · 硒。常见的例外情况。WebDriverException:消息:尝试通过Raspberry-pi3中的GeckoDriver打开Firefox浏览器时,连接被拒绝

6 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

6 年前

Mathador · WebDriverException:消息:TypeError:rect未定义

6 年前

PlanetAtkinson · 如何通过Python selenium在多个firefox二进制文件中选择要使用的firefox可执行文件

6 年前

Murasaki Aikon · 为什么firefox中未定义事件?

6 年前

patrick · 删除svg上的“全选”蓝色水滴单击

6 年前