Как использовать copy to clipboard.js для динамического назначения кнопки для копирования следующей текстовой области? (Несколько текстовых сообщений на одной странице) - PullRequest
Новая
       20

Как использовать copy to clipboard.js для динамического назначения кнопки для копирования следующей текстовой области? (Несколько текстовых сообщений на одной странице)

0 голосов
/ 04 июля 2019

Итак, я создал одну HTML-страницу с несколькими текстовыми областями и скопировал в кнопки буфера обмена. Кажется, я не могу заставить его работать, не давая каждому textarea уникальный идентификатор ...

Я огляделся по сторонам и попытался включить все запросы, но все равно не пошел. 

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

Я бы хотел иметь возможность удалить идентификатор цели со страницы, потому что у меня более ста или более текстовых областей, и я стараюсь не добавлять уникальный идентификатор и цель для каждого из них.

Итак, у меня есть более 400 текстовых полей и кнопок копирования для каждого поля на одной странице. В настоящее время, используя clipboard.js, все поля textarea имеют одинаковые id = "comment", и у каждого textarea есть кнопка с data-clipboard-target = "# comment", предназначенная для копирования текстовой области. Я хотел бы иметь возможность не идентифицировать каждую область текста и данные-буфер обмена-цели для каждой кнопки.

Если нет простого способа присвоить каждой текстовой области уникальный идентификатор = "комментарий" и кнопку для этого поля с той же целью data-clipboard-target?

Представьте, что у вас более 400 из нижеприведенных, и вам нужно поменять каждый.

...