如何使用复制到剪贴板.js动态定位按钮以复制下一个文本区域？ （一页上有多个文本区域）

时间：2019-07-04 01:55:12

标签： dynamic textarea target clipboard.js

因此，我创建了一个包含多个文本区域的HTML页面，并将其复制到剪贴板按钮。如果没有给每个textarea一个唯一的ID，我似乎无法使其正常工作...

我环顾四周，并试图促使选择所有查询，但还是没有。 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/primer-tooltips@2.0.0/build/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.6/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.6/dist/css/tooltipster.bundle.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<style>
body {
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;

}

* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 5px;
}

.icon {
  padding: 10px;
  background: #D5281E;
  color: white;
  min-width: 10px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 5px;
  outline: none;
}

.input-field:focus {
  border: 2px solid #D5281E;
}

.header {
  background-color: #ffffff;
  padding: 30px;
  text-align: center;
}

#navbar {
  margin: auto;
  overflow: hidden;
  background-color: #D5281E;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #D5281E;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

.logo {
    text-align: center;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}

/* End Fixed Top Menu */


/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
/* Begin Button to top of page */
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #D5281E; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #F51509; /* Add a dark-grey background on hover */
}

/* End Button to top of page */


</style>
</head>
<body>

<div class="row"><div class="column"><strong>&nbsp;&nbsp;Preview:</strong>
<a href="https://www.URL.com/"  target="_blank" rel="noopener">HYPERLINK</a>

<span class="input-container" style="max-width:500px;margin:auto"><button class="btn btn-primary"  data-clipboard-action="copy" data-clipboard-target="#comment"><i class="fa fa-copy"></i></button>
<textarea class="input-field js-copytextarea" readonly="readonly" id="comment" onclick="this.focus();this.select()">
<a href="https://www.URL.com/"  target="_blank" rel="noopener">HYPERLINK</a>
</textarea></span></div>

<div class="column"><strong>&nbsp;&nbsp;Preview:</strong>
<a href="https://www.URL2.com/"  target="_blank" rel="noopener">HYPERLINK2</a>
<span class="input-container" style="max-width:500px;margin:auto"><button class="btn btn-primary" data-clipboard-action="copy" data-clipboard-target="#comment2"><i class="fa fa-copy"></i></button>
<textarea class="input-field js-copytextarea" readonly="readonly" id="comment2" onclick="this.focus();this.select()">
<a href="https://www.URL2.com/"  target="_blank" rel="noopener">HYPERLINK 2</a>
</textarea></span></div></div>



<div class="row"><div class="column"><strong>&nbsp;&nbsp;Preview:</strong>
<a href="https://www.URL3.com/" target="_blank" rel="noopener">HYPERLINK 3</a>

<span class="input-container" style="max-width:500px;margin:auto"><button class="btn btn-primary"  data-clipboard-action="copy" data-clipboard-target="#comment3"><i class="fa fa-copy"></i></button>
<textarea class="input-field js-copytextarea" readonly="readonly" id="comment3" onclick="this.focus();this.select()">
<a href="https://www.URL3.com/" target="_blank" rel="noopener">HYPERLINK 3</a>
</textarea></span></div>

<div class="column"><strong>&nbsp;&nbsp;Preview:</strong>
<a href="https://www.URL2.com/"  target="_blank" rel="noopener">HYPERLINK 4</a>
<span class="input-container" style="max-width:500px;margin:auto"><button class="btn btn-primary" data-clipboard-action="copy" data-clipboard-target="#comment4"><i class="fa fa-copy"></i></button>
<textarea class="input-field js-copytextarea" readonly="readonly" id="comment4" onclick="this.focus();this.select()">
<a href="https://www.URL2.com/"  target="_blank" rel="noopener">HYPERLINK 4</a>
</textarea></span></div></div>


<script>
// Tooltip
$('button').tooltip({
  title: "Click to Copy", 
  trigger: "hover",
  delay: {show: 100, hide: 500},
  animation: true,
  placement: 'right'
}); 
$('button').tooltip({
  trigger: 'click',
  animation: true,
  placement: 'right'
});

function setTooltip(btn, message) {
  $(btn).tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip(btn) {
  setTimeout(function() {
    $(btn).tooltip('hide');
  }, 1000);
}

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  setTooltip(e.trigger, 'Copied!');
  hideTooltip(e.trigger);
});


clipboard.on('error', function(e) {
  setTooltip(e.trigger, 'Failed!');
  hideTooltip(e.trigger);
});



</script>

</body>
</html>

我希望能够从页面中删除目标ID，因为我拥有超过100个或更多的textarea，并试图避免为每个ID添加唯一的ID和目标。

因此，我在一页上有400多个textarea字段和每个字段的复制按钮。当前，使用剪贴板.js，所有textarea字段都具有相同的id =“ comment”，并且每个textarea都有一个带有data-clipboard-target =“＃comment”的按钮，用于定位要复制的textarea。我希望不必不必为每个textarea标识ID，也不必为每个按钮指定data-clipboard-target。

除非有一种简单的方法为每个文本区域赋予唯一的id =“ comment”和该字段的按钮相同的data-clipboard-target？

想象一下，拥有超过400种以下产品，而每一项都必须更换。

0 个答案:

没有答案
相关问题
最新问题