Как сделать копирование поля в браузер и очистка поля ввода. - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Как сделать копирование поля в браузер и очистка поля ввода., kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel HTML и CSS Дополнение, Artikel javascript, Artikel блог, Artikel Лайфхаки, Artikel сайт, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Как сделать копирование поля в браузер и очистка поля ввода.
link : Как сделать копирование поля в браузер и очистка поля ввода.

Baca juga


Как сделать копирование поля в браузер и очистка поля ввода.

Думаю, что каждый сталкивался с вопросом - как на сайте сделать копирование части текста, текстовых полей или полей ввода-вывода -различных инпутов. Коль скоро есть определенные поля, из которых мы хотим сохранять содержимое в браузер, то возникает закономерное желание и очищать эти поля нажатием одной кнопки

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

Начнем с разметки html документа:


<body>
  <input id="in" type="text">
  <button type="button" onclick = "reset('in')" >Reset</button>
  <br /><br />
  <input id="out" class="js-copyinput" type="text" >
  <button type="button" onclick="getLink();">Get Link</button>
  <button class="js-inputcopybtn" >Copy Link</button>
</body>


Ничего нового. Обычные текстовые поля input с кнопками button и специфичными идентификаторами id, для привязки к нашему JS - коду.

Добавляем JS - код для копирования




<script>
 var copyTextareaBtn = document.querySelector('.js-inputcopybtn');

 copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copyinput');
  copyTextarea.select();

  try {
   var successful = document.execCommand('copy');
   var msg = successful ? 'successful' : 'unsuccessful';
   alert('Copying text command was ' + msg);
  } catch (err) {
   alert('Oops, unable to copy');
  }
 });
</script>


Здесь, я думаю, что все понятно в коде и без пояснений. Берем поле с классом .js-copyinput и копируем его содержимое в браузер. Часть кода - try - catch добавлена для отображения процесса копирования пользователю. Я вывел уведомления в виде alert. Вы можете сделать это иначе или не показывать их вовсе. Но я думаю, что уведомления для пользователя нужны. Иначе не создается уверенности, что копирование информации в браузер прошло успешно.

JS - код для очистки полей.


Для того, чтобы нам очистить любое поле, нам достаточно просто написать в JS - коде, что значение этого поля равно пустой строке.
Например: document.getElementById('out').value = "";Здесь мы говорим браузеру, что поле со значением out должно быть пустым.


<script>
function reset() { 
if (document.getElementById('in').value != "" || document.getElementById('out').value != "" )  {
document.getElementById('in').value = "";
document.getElementById('out').value = "";
}else {return false}; 
};
</script>
Посмотреть готовый пример можно на сайте Codepen

See the Pen Модератор Ссылки загрузкиГД с копированием и очисткой полей by YaroslavW (@YaroslavW) on CodePen.



Здесь, я не стал останавливаться на подключении функций. Думаю, что по этой теме информации сейчас предостаточно. Буду рад вашим отзывам и комментариям. В следующий раз я постараюсь остановиться на более интересных вещах.

                                                                                                                                                             


Demikianlah Artikel Как сделать копирование поля в браузер и очистка поля ввода.

Sekianlah artikel Как сделать копирование поля в браузер и очистка поля ввода. kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Как сделать копирование поля в браузер и очистка поля ввода. dengan alamat link https://dev-create.blogspot.com/2018/02/blog-post.html