Думаю, что каждый сталкивался с вопросом - как на сайте сделать копирование части текста, текстовых полей или полей ввода-вывода -различных инпутов. Коль скоро есть определенные поля, из которых мы хотим сохранять содержимое в браузер, то возникает закономерное желание и очищать эти поля нажатием одной кнопки
Я хочу вам рассказать это на примере моего сервиса модификации ссылок для загрузки. Посмотреть его в работе и прочитать для чего он нужен вы сможете перейдя по ссылке.
Начнем с разметки html документа:
Ничего нового. Обычные текстовые поля
Здесь, я думаю, что все понятно в коде и без пояснений. Берем поле с классом
Для того, чтобы нам очистить любое поле, нам достаточно просто написать в JS - коде, что значение этого поля равно пустой строке.
Например:
Здесь, я не стал останавливаться на подключении функций. Думаю, что по этой теме информации сейчас предостаточно. Буду рад вашим отзывам и комментариям. В следующий раз я постараюсь остановиться на более интересных вещах.
Я хочу вам рассказать это на примере моего сервиса модификации ссылок для загрузки. Посмотреть его в работе и прочитать для чего он нужен вы сможете перейдя по ссылке.
Начнем с разметки 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>
Посмотреть готовый пример можно на сайте CodepenSee the Pen Модератор Ссылки загрузкиГД с копированием и очисткой полей by YaroslavW (@YaroslavW) on CodePen.
Здесь, я не стал останавливаться на подключении функций. Думаю, что по этой теме информации сейчас предостаточно. Буду рад вашим отзывам и комментариям. В следующий раз я постараюсь остановиться на более интересных вещах.
Комментариев нет:
Отправить комментарий