Tengo 3 campos de entrada, y cada uno tiene valores diferentes. Estoy usando clipboardjs CDN para copiar valores de entrada. El primer valor de entrada está trabajando para obtener valor. pero el segundo y tercer valor de entrada no funcionan para copiar estos valores. Estoy tratando de copiar el valor de entrada por estos códigos.
var clipboard = new ClipboardJS('.btncopy'); clipboard.on('success', function (e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); }); clipboard.on('error', function (e) { console.log(e); }); .btncopy { padding: 2px 8px; background: #704b71; color: #fff; } .form-control{ margin: 5px; } <input id="emos" type="text" class="form-control" value="❤️" style="display: block;"> <span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emos">Copy</span> <input id="emos" type="text" class="form-control" value="💜💜" style="display: block;"> <span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emos">Copy</span> <input id="emos" type="text" class="form-control" value="💚💚💚" style="display: block;"> <span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emos">Copy</span> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>Está declarando 3 identificadores con el mismo nombre en varias etiquetas de entrada, donde el identificador debe ser por etiqueta y único.
Para solucionarlo, haga que los identificadores de entrada sean únicos para la entrada y cambie el objetivo del portapapeles de datos en consecuencia.
var clipboard = new ClipboardJS('.btncopy'); clipboard.on('success', function (e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); }); clipboard.on('error', function (e) { console.log(e); }); .btncopy { padding: 2px 8px; background: #704b71; color: #fff; } .form-control{ margin: 5px; } <input id="emo1" type="text" class="form-control" value="❤️" style="display: block;"> <span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emo1">Copy</span> <input id="emo2" type="text" class="form-control" value="💜💜" style="display: block;"> <span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emo2">Copy</span> <input id="emo3" type="text" class="form-control" value="💚💚💚" style="display: block;"> <span class='btncopy' data-clipboard-action="copy" data-clipboard-target="#emo3">Copy</span> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>