copy value with select() and copy

Question

I'm trying select a input and then copy the text into input, but has trouble identifying the children.

$(".input-group .copyLink").click(function() {
  $(this).parent().find('.htmlLink').select();
  document.execCommand("copy");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
  <input type="text" class="htmlLink" value="http://google.cl">
  <button class="copyLink">Copy</button>
</div>
<div class="input-group">
  <input type="text" class="htmlLink" value="http://microsoft.com">
  <button class="copyLink">Copy</button>
</div>
<div class="input-group">
  <input type="text" class="htmlLink" value="http://apple.com">
  <button class="copyLink">Copy</button>
</div>

Any suggestion?

Thanks!

Your question isn't exactly clear. When I click `Copy` in your example, the text from the input is correctly copied to my clipboard. — Tyler Roper, Aug 17 '18 at 03:11

score 1 · Accepted Answer · answered Aug 17 '18 at 03:25

You can shorten the code little bit since you have a div wrapper and only one sibling:

$(".input-group .copyLink").click(function() {
  $(this).siblings().select();
  document.execCommand("copy");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
  <input type="text" class="htmlLink" value="http://google.cl">
  <button class="copyLink">Copy</button>
</div>
<div class="input-group">
  <input type="text" class="htmlLink" value="http://microsoft.com">
  <button class="copyLink">Copy</button>
</div>
<div class="input-group">
  <input type="text" class="htmlLink" value="http://apple.com">
  <button class="copyLink">Copy</button>
</div>

score 0 · Answer 2 · edited Aug 17 '18 at 03:52

You need to bind event with your button, based on button event response, you need to find your input box using jquery DOM selector function like "prev". After this, execute your other task with input object.

Reference for jquery DOM Selector: jQuery: find input field closest to button

Your answer jsfiddle: https://jsfiddle.net/JackRyu/udk6za34/1/

You answer code

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

<html>
<body>
<div class="input-group">
<input type="text" class="htmlLink" value="http://google.cl">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://microsoft.com">
<button class="copyLink">Copy</button>
</div>
<div class="input-group">
<input type="text" class="htmlLink" value="http://apple.com">
<button class="copyLink">Copy</button>
</div>

<body>


<script>

    $('.input-group button').on('click',function(){
            console.log('active');
            var input=$(this).prev('input');
            $(input).select();
            document.execCommand('copy');
    });

</script>

</html>

copy value with select() and copy

2 Answers2