Скрыть / Показать содержимое поля ввода.|Простые советы.

пятница, 1 июня 2018 г.

Скрыть / Показать содержимое поля ввода.

Довольно часто бывает необходимость добавить некий функционал полю ввода. Например - срыть / показать пароль пользователю, при вводе данных. Это значительно облегчает введение данных, особенно в случаях неисправности клавиатуры пользователя (западают кнопки, не пропечатываются, или не работает Caps или Shift.В общем, вещь не только привлекательная, но и порой, даже нужная!

В интернете вы найдете массу различных способов, как это сделать, но они, как правило, все написаны с библиотекой jQuery. Подключать библиотеку только для этого, бывает излишним, а переписывать нужные функции отдельно - трудозатратно, поэтому я решил написать код на чистом JavaScript.

Без долгих предисловий.

Рассмотрим вариант самого простого функционала - просто показать / скрыть пароль кликом на кнопку:

Вариант 1:самый простой.

Меняется только надпись на кнопке.
В файле HTML ничего особенного. Просто поле ввода пароля и кнопка. Им добавлены идентификаторы - id, для того, чтобы можно было с ними работать при помощи JavaScript.

JavaScript код я не стал выносить в отдельный файл и записал его здесь же.

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

На кнопку вешаем событие - click и запускаем функцию.

Внутри функции мы проверяем значение атрибута type у элемента input. Если это password, то мы меняем его на атрибут text, и наоборот.

Заодно и поменяли одержимое (название) кнопки button.

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

Ниже полностью код файла index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>

</head>
<body>
 <p>Enter the Password: <input type="password" id="show1"></p>
 <button id="show">Show password</button>

 <script>
  var input = document.getElementById("show1");
  var button = document.getElementById("show");
  button.onclick = show;

  function show () {
   if(input.getAttribute('type') == 'password') {
    input.removeAttribute('type');
    input.setAttribute('type', 'text');
    button.innerHTML='Hide password';

   } else {
    input.removeAttribute('type');
    input.setAttribute('type', 'password');
    button.innerHTML='Show password';

   }
  }
 </script> 
</body>
</html>

Вариант с иконкой.

Смена надписи на кнопке и иконки в любой части кода

Идем на сайт Font Awesome и выбираем понравившиеся иконки.

Подключаем Font Awesome через CDN в нашем хедере.

Добавляем одну иконку на страницу.

Например: <i id="i" class="far fa-eye"></i>

Теперь мы будем менять не только атрибут, но и класс элемента i, поэтому нам нужно добавить элементу идентификатор id

Остальное здесь все почти точно так же.

Ниже полностью код файла index.html


        <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- Font - Awesome -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 </head>
 <body>
  <!-- <i class="far fa-eye-slash"></i> вторая иконка закомментированна-->
  <p>Enter the Password: <input type="password" id="show1"></p>
  <button id="show">Show password</button><i id="i" class="far fa-eye"></i>
  
  <script>
   var button = document.getElementById("show");
   button.onclick = show;
   var input = document.getElementById("show1");
   var icon = document.getElementById("i");
   function show () {
    if(input.getAttribute('type') == 'password') {
     input.removeAttribute('type');
     input.setAttribute('type', 'text');
     button.innerHTML='Hide password';
     icon.className = 'far fa-eye-slash';
    } else {
     input.removeAttribute('type');
     input.setAttribute('type', 'password');
     button.innerHTML='Show password';
     icon.className = 'far fa-eye';
    }
  }
 </script>
 </body>
 </html>

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

В этом коде все будет работать так как показано на картинке, но стоит помнить, что класс мы меняем новым свойством браузера, которое не поддерживается браузером IE < 10 версии.

В таких случаях можно использовать jquery или вариант ниже.

Третий вариант

Смена надписи и иконки внутри кнопки

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

Ниже полностью код файла index.html


 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- Font - Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <!-- your file js -->
  <script src="main.js" defer></script>
 </head>
 <body>

  <p>Enter the Password: <input type="password" id="show1"></p>
  <button id="show">Show password  <i id="i" class="far fa-eye"></i></button>
  
  <script>
   var button = document.getElementById("show");
   button.onclick = show;
   var input = document.getElementById("show1");
   var icon = document.getElementById("i");
   function show () {
    if(input.getAttribute('type') == 'password') {
     input.removeAttribute('type');
     input.setAttribute('type', 'text');
     button.innerHTML='Hide password  <i id="i" class="far fa-eye-slash">';
    } else {
     input.removeAttribute('type');
     input.setAttribute('type', 'password');
     button.innerHTML='Show password  <i id="i" class="far fa-eye">';
    }
   }
  </script>
 </body>
 </html>

Вариант с подменой вводимых символов.

Приведу такой вариант просто для информации. Если честно, то совершенно не могу представить, где он может пригодиться.

Суть в том, что мы можем сохранить то что вводит пользователь так как ест, а вместо этого подставить в поле ввода случайные символы.

То есть. Пользователь вводит, например - vvvvvvvvv, а в поле ввода видит - ZfhEysUFKk.
Точно. как на картинке ниже.

Для этого мы сохраняем то что ввел пользователь в переменную str, а вместо этого в this.value выводим случайный символ, полученный путем генерации случайного числа (от 65 до 122 - потому как это цифровое значение символов в разных регистрах разрешенных для паролей).

Затем, мы из случайного числа генерируем символ - String.fromCharCode(); И уже этот символ выводим в поле ввода присвоив его переменной this.value Здесь приведу сам js скрипт


        var str =  "";  // то что ввел юзер
 document.getElementById("test").onkeypress = function (event) {
  // то что ввел юзер
  // var str = this.value;
  str = str + event.key;
  console.log(str);

  // вывод в инпут случайных символов
  this.value += String.fromCharCode(getRandomInt(65, 122));
  // запрет вывода в инпут того что вводит пользователь 
  return false;
 }
 // функция генерации случайного числа от - до
 function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
 }

1 комментарий:

Unknown15 марта 2022 г. в 23:16
Спасибо!
ОтветитьУдалить
Ответы

Добавить комментарий

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com

Страницы

Translate

Поиск по этому блогу

пятница, 1 июня 2018 г.