未捕获的类型错误：text.select 不是函数

Question

I am trying to implement copy to clipboard feature using javascript which is meant to copy the text in the text area when the copy button is clicked by the user. This is the code from script which is meant to do this feature.

var item = document.getElementsByClassName('js-copyBtn');

for(var i=0; i < item.length; i++){
    item[i].addEventListener('click', function(event){

        var text = document.getElementsByClassName('js-text');
        text.select();

        try{
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';    
            console.log('Copy was ' + msg);  
       } catch(err) {  
         console.log('Oops, unable to copy');  
       }  
    });
}

However when i run this, i am getting an error on google chrome console saying Uncaught TypeError: text.select is not a function . I have also tested this on other browsers but getting the same result. Anyone else came across this problem ?

Answer 1

I ran into this problem today and felt frustrated just as you when the marked answer didn't work for me. After some additional thinking i realised my problem was trying to paste into paragraph element <p></p> . When I changed it to textarea it worked well. So you indeed had a problem with the access to the array but when you finally got to the specific element you should have made sure its an editable element.

Good luck!

Answer 2

getElementsByClassName returns a HTMLCollection of found elements not an individual element. A HTMLCollection indeed does not have a select function.

You probably want the first element in the collection

var text = document.getElementsByClassName('js-text');
text[0].select();

Answer 3

The .select() method does indeed retrieve the text from a field. However, you are trying to run it on an array of elements var text = document.getElementsByClassName('js-text'); . This method returns an array of all elements with that class name.

If there is only one such element, you could use the array indexer to retrieve the first one. var text = document.getElementsByClassName('js-text')[0]; .

Alternatively, if there is only one such element, you might consider giving this element an id and using document.getElementById() which will only return one element. (An ID should be unique on the page)

Answer 4

getElementByClassName 返回一个元素数组所以，你必须使用 text[0].select();

Answer 5

execCommandを使用できるのはtextareaだけのようなので代わりにnabigatorを使えばいいと思います。

It seems that only textarea can use execCommand, so I think you should use navigator instead.

 navigator.clipboard.writeText(copyTarget);

Answer 6

Pretty simple, set an onclick button or link or div, pass the unique id into the function calling the class of the input where the value is, the input would also be unique by class with an id attached.

 <a onclick="copytoclipboard(<?php echo $postid['streamitem_id'] ?>)">Copy Link</a>
    <input type="text" value="singlepost.php?postid=<?php echo $postid['streamitem_id'] ?>"
 class="copyclip<?php echo $postid['streamitem_id'] ?>" id="myInput">

We then have the copytoclipboard code grabbing the unique id from the onclick. Classnames with different ids are unique so they are an Array of items, this can be search by adding the [0] to the searching of all elements that are the same by name but unique by number in this case.

  <script>
/* Copy text to clipboard for single posts from the dropdown post menu */

    function copytoclipboard(streamitem_id) {
      /* Get the text field */
      var streamitem_id=streamitem_id;
      var copyText = document.getElementsByClassName('copyclip'+streamitem_id)[0];
    
      /* Select the text field */
      copyText.select();
    
      /* Copy the text inside the text field */
      document.execCommand("copy");
    
      /* Alert the copied text */
      alert("Copied the text: " + copyText.value);
    }
    </script>