Question

我一直在寻找类似这样的东西，但由于某些原因我无法正常工作。我不确定我错过了什么或做错了什么。

此处的参考资料： http://www.satya-weblog.com/2013/11/javascript-select-all-content-html-element.html

Selecting text in an element (akin to highlighting with your mouse)

如果有人可以节省一些时间，将非常感谢。

我正在设置一个横幅交换，用于复制和粘贴代码，使用新的bootstrap 3.0.2，美化和select2.js参考这里找到的演示。

(function() {
    function selectText(element) {
        var doc = document
            , text = element
            , range, selection
        ;
        if (doc.body.createTextRange) { //ms
            range = doc.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) { //all others
            selection = window.getSelection();
            range = doc.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
    preTags = document.getElementsByTagName('pre');
    for(var i=0;i<preTags.length;i++) {
        preTags[i].onclick = function() {selectText(this)};
    }
})();

这是我设置的演示代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Banners Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
    <script src="js/select2.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  <div style="margin-top: 20px;"></div>

  <div class="container">

<div style="margin-top:50px;"></div>

<ul class="nav nav-pills">
  <li class="active"><a href="#demo1" data-toggle="tab">Demo 1</a></li>
</ul>



<div class="tab-content">

  <div style="margin-top:20px;"></div>
  <div class="tab-pane fade in active" id="demo1">
  <p></p>
  <p>Copy and Paste Code:</p>

  <pre class="prettyprint linenums lang-html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Demo | Prettify.JS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

  </div>


  </div>

</div>


<div style="margin-top: 50px;"></div>

</div>
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
    <script>
  !function ($) {
    $(function(){
      window.prettyPrint && prettyPrint()   
    })
  }(window.jQuery)
</script>
  </body>
</html>

Answer 1

也许，您可以使用window.getSelection()获取全局Selection对象，然后进行修改？ developer.mozilla.org上的示例：

var strongs = document.getElementsByTagName("strong");
var s = window.getSelection();

if(s.rangeCount > 0) s.removeAllRanges();

for(var i = 0; i < strongs.length; i++) {
   var range = document.createRange();
   range.selectNode(strongs[i]);
   s.addRange(range);
}

Answer 2

谢谢大家，我真的很感谢你的帮助。我对你的回答进行了一些研究，得到了剧本作者的回复。我把头发拉了出来，有点想把电脑扔到窗外：P

无论如何，作者Satya表示select.js脚本需要位于文档的 END 而不是标题中。它也很棒！

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Banners Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="container">
<div style="margin-top:50px;"></div>
<ul class="nav nav-pills">
  <li class="active"><a href="#demo1" data-toggle="tab">Demo 1</a></li>
</ul>
<div class="tab-content">
<div style="margin-top:20px;"></div>
<div class="tab-pane fade in active" id="demo1">
<p></p>
<p>Copy and Paste Code:</p>
<pre class="prettyprint linenums lang-html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Demo | Prettify.JS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>
</div>
</div>
<div style="margin-top: 50px;"></div>
</div>
<script src="js/select2.js"></script>
    <script>
  !function ($) {
    $(function(){
      window.prettyPrint && prettyPrint()   
    })
  }(window.jQuery)
</script>
  </body>
</html>

全选或突出显示元素中的所有文本

2 个答案: