Is there any system in javaScript to copy deferent multiple "Input field" with each deferent button or icon?

Question

Description of the project: I have a simple project. This project has multiple input fields with a "Copy icon". Every Input has a deferent different copy Icon.

Problem: When I click the copy icon only the first input filed will select and copy the other copy icon doesn't work

I want: When I click the first copy icon, copy will be the first input field. Again when I Click the second copy icon, copy will be the second input field. This process will be continued.

Reference Desing Please see the image of this project

Welcome to Stack Overflow. Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example You may also want to take the Tour: https://stackoverflow.com/tour — Twisty, Mar 14 '21 at 18:47
JavaScript code: (Do you need HTML and css code)? const myInput = document.querySelector("#copyText"); const myIcon = document.querySelector(".copyIcon"); myIcon.onclick = function(){ myInput.select(); document.execCommand("copy"); }; — Towker_joy, Mar 14 '21 at 19:01
Edit it into your code. Also provide your HTML structure. So we can understand how to select the icons and input tags — a.mola, Mar 14 '21 at 19:08
Please visit (Can't upload or write html because it's too big so please visit and see the all html css and JavaScript code): https://codepen.io/towkerjoy/pen/ExNpray — Towker_joy, Mar 14 '21 at 19:23
Consider the following potentially helpful answer: https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery — Twisty, Mar 14 '21 at 20:02

score 0 · Answer 1 · answered Mar 14 '21 at 19:46

You need to know that the id attribute is meant to be unique, having the same id in the same document may not give you the element you want to select.

I selected all the icons from the page, then I picked up selected the input through its parent in case of you have reason to change the DOM.

You should also know that document.execCommand() has been deprecated, a more modern approach is using the navigator.clipboard API

const icons = [...document.querySelectorAll(".copyIcon")];

icons.forEach(icon => icon.addEventListener('click', _ => {
  icon.parentElement.querySelector('input').select();
  document.execCommand("copy");
}));

<div class="input-group">
  <label for="">Decimal</label>
  <ion-icon name="copy-outline" class="copyIcon"></ion-icon>
  <input type="text" placeholder="eg. 1324" id="copyText"> <!-- Don't forget to change the IDs for the inputs -->
</div>

score 0 · Accepted Answer · answered Mar 14 '21 at 20:20

Consider the following.

$(function() {
  $(".copyIcon").click(function() {
    var input = $(this).next();
    if (input.val() != "") {
      input.select();
      document.execCommand("copy");
    }
    input.blur();
  });
});

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  width: 100%;
  background: #efefee;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  max-width: 700px;
  background: #fff;
  min-height: 100vh;
  margin: 0 auto;
}

header {
  width: 100%;
  padding: 1.25rem;
  background: #424242;
  color: #fff;
  font-family: Arim Madurai;
  text-align: center;
  text-transform: uppercase;
}

section {
  padding: 1rem 2rem;
}

section h2 {
  font-family: Arim Madurai;
  font-size: 1.25rem;
  color: #424242;
}

section .box {
  width: 100%;
  background: #fff;
  box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  border-radius: .25rem;
}

.input-group {
  margin: 1rem 0;
}

.input-group label {
  display: block;
  font-size: 1rem;
  color: #666;
  text-align: left;
  font-family: Arim Madurai;
}

.input-group input {
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: .5rem;
  margin-top: 0.5rem;
  border-radius: .25rem;
  background: transparent;
  border: 1px solid #ccc;
  outline: none;
  font-family: Arim Madurai;
}

.copyIcon {
  float: right;
  margin-top: -1rem;
  cursor: pointer;
}

.copyIcon:hover {
  color: aqua;
}

.copyIcon:focus {
  color: aqua;
}

.reset {
  display: flex;
}

.reset button {
  margin-left: auto;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 2px solid #ff1717;
  border-radius: .25rem;
  color: #ff1717;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .75rem;
  cursor: pointer;
  transition: .5s;
  font-weight: bold;
}

.reset button:hover {
  background: #ff1717;
  color: #fff;
  border: 2px solid #ff1717;
}

.input-group textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 150px;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  outline: none;
  background: transparent;
  border: 1px solid #ccc;
  resize: none;
  font-family: Arim Madurai;
}


/* Extra Class For Margin */

.one-rem-margin {
  margin-top: 1rem;
}

.one-rem-space {
  height: 1rem;
}

.half-rem-space {
  height: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.js"></script>
<div class="container">
  <!-- Header Section-->
  <header id="title">
    <h1>number and text converter</h1>
  </header>
  <!-- Main Contain Section -->
  <main id="main">
    <!-- Number System Convertion -->
    <section id="number-convertion">
      <h2>Number System Convertion</h2>
      <div class="box">
        <div class="input-group">
          <label for="">Decimal</label>
          <ion-icon name="copy-outline" class="copyIcon"></ion-icon>
          <input type="text" placeholder="eg. 1324">
        </div>
        <div class="input-group">
          <label for="">Binary</label>
          <ion-icon name="copy-outline" class="copyIcon"></ion-icon>
          <input type="text" placeholder="eg. 101101">
        </div>
        <div class="input-group">
          <label for="">Octal</label>
          <ion-icon name="copy-outline" class="copyIcon"></ion-icon>
          <input type="text" placeholder="eg. 174">
        </div>
        <div class="input-group">
          <label for="">Hexadecimal</label>
          <ion-icon name="copy-outline" class="copyIcon"></ion-icon>
          <input type="text" placeholder="eg. 15EEAF">
        </div>
        <div class="reset">
          <button>Reset</button>
        </div>
        <div class="one-rem-space"></div>
      </div>
    </section>
    <!-- Text System Convertion -->
    <section id="text-convertion">
      <h2>Text System Convertion</h2>
      <div class="box">
        <div class="input-group">
          <label for="">Input Your Text</label>
          <ion-icon name="copy-outline" class="copyIcon"></ion-icon>
          <textarea name="text-field" cols="30" rows="10"></textarea>
        </div>
        <div class="half-rem-space"></div>
        <div class="input-group">
          <label for="">Input Your Binary Number</label>
          <ion-icon name="copy-outline" class="copyIcon"></ion-icon>
          <textarea name="binnery-field" cols="30" rows="10"></textarea>
        </div>
        <div class="reset">
          <button>Reset</button>
        </div>
        <div class="one-rem-space"></div>
      </div>
    </section>
  </main>
</div>

This makes use of relative positioning of each Icon and selects the next element.

Many Many thanks for solving this problem. Twisty is supper. Best wishes for the future. Project running perfectly. — Towker_joy, Mar 15 '21 at 08:30

Is there any system in javaScript to copy deferent multiple "Input field" with each deferent button or icon?

2 Answers2