Блог

Главная - Вопросы по программированию - Скопируйте предыдущее содержимое ввода нажатием кнопки

Скопируйте предыдущее содержимое ввода нажатием кнопки

#javascript #html #jquery

Вопрос:

У меня есть несколько html и jQuery, как показано ниже:

 $(".btn-copy").click(function() {
  var previousContent = $(this).prev()[0];
  previousContent.select();
  document.execCommand('copy');
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-fiche item-hidden">
  <label>
        Identifier
        <input type="text" name="login-1" placeholder="Write you login" value="My login">
        <button class="btn-copy">Copy</button>
    </label>
  <label>
        Password
        <input type="password" name="password-1" placeholder="Write your password" value="My password">
        <button class="btn-copy">Copy</button>
        <button class="btn-save">Save</button>
    </label>
</div>

Когда я нажимаю первую кнопку копирования, «Мой логин» копируется правильно.
Но когда я нажимаю вторую кнопку копирования, копия не обновляется, например, если элемент не найден, хотя я вижу, что пароль выбирается при нажатии на кнопку.

Есть какие-нибудь идеи?

Ответ №1:

Поле ввода с типом password не поддерживает копирование его содержимого в целях безопасности. Если вы хотите скопировать, вы должны изменить тип поля на text , скопировать текст, а затем снова изменить на password .

 $(".btn-copy").click(function() {
  var previousContent = $(this).prev()[0];
  var fieldType = previousContent.type; // Saving orig field type

  // Set current type to 'text'
  previousContent.type = 'text';
  previousContent.select();
  document.execCommand('copy');

  // Return back orig type for field
  previousContent.type = fieldType;
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-fiche item-hidden">
  <label>
        Identifier
        <input type="text" name="login-1" placeholder="Write you login" value="My login">
        <button class="btn-copy">Copy</button>
    </label>
  <label>
        Password
        <input type="password" name="password-1" placeholder="Write your password" value="My password">
        <button class="btn-copy">Copy</button>
        <button class="btn-save">Save</button>
    </label>
</div>
Метки: