Question

我正在尝试选择一个输入，然后将文本复制到输入中，但是无法识别子项。

$(".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>

有什么建议吗？

谢谢！

Answer 1

由于您有一个div包装器，并且只有一个兄弟姐妹，因此可以稍微缩短代码的时间：

$(".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>

Answer 2

您需要将事件与按钮绑定，基于按钮事件响应，您需要使用jquery DOM选择器功能（如“ prev”）找到输入框。之后，使用输入对象执行其他任务。

jquery DOM选择器的参考：jQuery: find input field closest to button

您的答案jsfiddle：https://jsfiddle.net/JackRyu/udk6za34/1/

您回答代码

<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>

用select（）复制值并复制

2 个答案: