2 单击复制按钮仅复制 1 个输入字段

Question

我有一个可以从一个输入字段复制文本值的工作按钮。

我需要做两个，但是当我更改值时，第一个按钮开始从第一个输入字段复制值。这是我的代码：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js">
</script>
<script>
function CopyCode(){
    var text = document.getElementById("input-text");
    text.select();
    document.execCommand("copy");
   }
var text = document.getElementById("element-id");
text.select();
document.execCommand("copy");
</script>

<input type="text" placeholder="CODE" value="CODE" style="text-align:center;" id="input-text"/>
 <script type="text/javascript">    
 $('input').keypress(function(e) {
             e.preventDefault();
  });

   </script>
   <button onclick="CopyCode()">COPY</button>  <br/> <br/>


            <!--- SECOND --->


<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js">
</script>
<script>
function CopyCode(){
    var text = document.getElementById("coupon2-text");
    text.select();
    document.execCommand("copy");
   }
var text = document.getElementById("element-id");
text.select();
document.execCommand("copy");
</script>

<input type="text" placeholder="CODE2" value="CODE2" style="text-align:center;" id="coupon2-text"/>
 <script type="text/javascript">    
 $('input').keypress(function(e) {
             e.preventDefault();
  });

   </script>
   <button onclick="CopyCode()">COPY</button>  <br/> <br/>

Tryit 编辑器：https://www.w3schools.com/code/tryit.asp?filename=FWJF0IFLP9D8 有什么建议吗？

Answer 1

这是您当前代码的输出：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js">
</script>
<script>
function CopyCode(){
    var text = document.getElementById("input-text");
    text.select();
    document.execCommand("copy");
   }
var text = document.getElementById("element-id");
text.select();
document.execCommand("copy");
</script>

<input type="text" placeholder="CODE" value="CODE" style="text-align:center;" id="input-text"/>
 <script type="text/javascript">    
 $('input').keypress(function(e) {
             e.preventDefault();
  });

   </script>
   <button onclick="CopyCode()">COPY</button>  <br/> <br/>


            <!--- SECOND --->


<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js">
</script>
<script>
function CopyCode(){
    var text = document.getElementById("coupon2-text");
    text.select();
    document.execCommand("copy");
   }
var text = document.getElementById("element-id");
text.select();
document.execCommand("copy");
</script>

<input type="text" placeholder="CODE" value="CODE" style="text-align:center;" id="coupon2-text"/>
 <script type="text/javascript">    
 $('input').keypress(function(e) {
             e.preventDefault();
  });

   </script>
   <button onclick="CopyCode()">COPY</button>  <br/> <br/>

这是更新后代码的输出：

function CopyCode(){
    var text = document.getElementById("coupon2-text");
    text.select();
    document.execCommand("copy");
}
$("button").click(function() {
  var textId = $(this).attr("class");
  var text = document.getElementById(textId);
  text.select();
  document.execCommand("copy");
});

$('input').keypress(function(e) {
             e.preventDefault();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="CODE" value="CODE 1" style="text-align:center;" id="coupon2-text"/>
<button class="coupon2-text">COPY</button>  <br/> <br/>

<input type="text" placeholder="CODE" value="CODE 2" style="text-align:center;" id="input-text"/>
   <button class="input-text">COPY</button>  <br/> <br/>