0

このようなものを高低で検索してきましたが、何らかの理由でうまく機能しません。何が欠けているのか、間違っているのかわかりません。

ここにある参照: http://www.satya-weblog.com/2013/11/javascript-select-all-content-html-element.html

要素内のテキストを選択する (マウスで強調表示するのと同様)

誰かが時間を割いてくれたら、どうもありがとう。

ここで見つかったデモを参照して、新しいブートストラップ 3.0.2、prettify、および 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>
4

2 に答える 2

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);
}
于 2014-01-15T21:10:03.147 に答える
0

皆さん、ありがとう、私はあなたの助けに本当に感謝しています. あなたの回答について調査したところ、スクリプトの作成者から回答がありました。私は髪を引っ張っていて、窓からピューターを投げ出したかったのです:P

いずれにせよ、著者のSatyaは、select.js スクリプトはヘッダーではなくドキュメントの末尾に配置する必要があると述べています。それもうまくいきます！

<!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>
于 2014-01-16T22:47:27.507 に答える