jQuery / JavaScript复制函数出错

Question

我正在尝试创建一个按钮，以便从textarea中复制一些内容。我已经设法将这些代码从在线工作示例中聚集在一起，但我的某些原因似乎无法正常工作。有谁知道为什么？我知道有插件，但他们使用Flash，我想避免这种情况。如果有人知道更好的解决方案，请分享。

当我点击复制按钮时，我进入控制台：

  

未捕获的TypeError：无法在'Range'上执行'selectNodeContents'：   参数1不是'Node'类型。

小提琴：http://jsfiddle.net/L1o8qz8w/2/

JS：

$(document).ready(function() {
    // show examples
    $(document).on("click",".show-syntax",function(e){
        $next = $(this).parents(".parentcontainer").find('.render-syntax');
        $next.show();
        //$('.render-syntax').show();
        $('html,body').animate({ scrollTop: $next.offset().top},'slow');
        e.preventDefault();
    });

    $(document).on("click",".copy-syntax",function(e){
        var code = $(this).parent().next(".render-syntax textarea");
        // "Optional" Select some text
        var range = document.createRange();
        range.selectNodeContents(code);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);

        // Use try & catch for unsupported browser
        try {
            // The important part (copy selected text)
            var successful = document.execCommand('copy');

            // "Optional" remove selected text
            sel.removeAllRanges();

            if(successful){
                code.val();
                alert('copied!');
            } else {
                alert('Unable to copy!');
            }
       } catch (err) {
           alert('Unsupported Browser!');
       }
    });
});

HTML：

<pre><a href="#" class="btn copy-syntax">Copy to clipboard</a>
          <a href="#" id="copy-button" class="btn show-syntax">Show below's output</a>
          <code data-language="html" class="rainbow">

            <span class="comment html">&lt;!-- .container is main centered wrapper --&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">container</span><span class="string quote">"</span><span class="support tag close">&gt;</span>

              <span class="comment html">&lt;!-- columns should be the immediate child of a .row --&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">one column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>One<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">eleven columns</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Eleven<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>

              <span class="comment html">&lt;!-- just use a number and class 'column' or 'columns' --&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">two columns</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Two<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">ten columns</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Ten<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>

              <span class="comment html">&lt;!-- there are a few shorthand columns widths as well --&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">one-third column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>1/3<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">two-thirds column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>2/3<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">one-half column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>1/2<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
                <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">one-half column</span><span class="string quote">"</span><span class="support tag close">&gt;</span>1/2<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
              <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>

            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>

            <span class="comment html">&lt;!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) --&gt;</span>

          </code></pre>

<div class="render-syntax">
          <textarea id="code">            &lt;!-- columns should be the immediate child of a .row --&gt;
            &lt;div class="row"&gt;
              &lt;div class="one column"&gt;One&lt;/div&gt;
              &lt;div class="eleven columns"&gt;Eleven&lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- just use a number and class 'column' or 'columns' --&gt;
            &lt;div class="row"&gt;
              &lt;div class="two columns"&gt;Two&lt;/div&gt;
              &lt;div class="ten columns"&gt;Ten&lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- there are a few shorthand columns widths as well --&gt;
            &lt;div class="row"&gt;
              &lt;div class="one-third column"&gt;1/3&lt;/div&gt;
              &lt;div class="two-thirds column"&gt;2/3&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="one-half column"&gt;1/2&lt;/div&gt;
              &lt;div class="one-half column"&gt;1/2&lt;/div&gt;
            &lt;/div&gt;
          </textarea>
          <h3>Example output of the syntax above</h3>
          <div class="container demo">
            <!-- columns should be the immediate child of a .row -->
            <div class="row">
              <div class="one column">One</div>
              <div class="eleven columns">Eleven</div>
            </div>

            <!-- just use a number and class 'column' or 'columns' -->
            <div class="row">
              <div class="two columns">Two</div>
              <div class="ten columns">Ten</div>
            </div>

            <!-- there are a few shorthand columns widths as well -->
            <div class="row">
              <div class="one-third column">1/3</div>
              <div class="two-thirds column">2/3</div>
            </div>
            <div class="row">
              <div class="one-half column">1/2</div>
              <div class="one-half column">1/2</div>
            </div>
          </div>

        </div>

Answer 1

尝试使用以下代码更改您的代码：

    //var code = $(this).parent().next(".render-syntax textarea");
    var code = $("#code").focus()[0];

或

$(".render-syntax textarea").focus()[0]

[0]或[1]等等，如果你的textarea超过1

Answer 2

你必须上升到另一个父级别，因为该按钮的父级是<pre>标记且.render-syntax不在其中：

$(this).parent().parent().next(".render-syntax textarea");

我相信你应该使用find代替next：

$(this).parent().parent().find(".render-syntax textarea");

Answer 3

这是一个似乎有用的小提琴（无论如何更好）http://jsfiddle.net/L1o8qz8w/3/

您的代码更改如下：

    var code = $(this).parent().parent().find(".render-syntax textarea");
                                ^^^^^^^^ ^^^^ go up one more level, and find what you are looking for
    // "Optional" Select some text
    var range = document.createRange();
    range.selectNodeContents(code[0]);
                                 ^^^ you want a NODE not some jquery garbage