it-swarm.com.ru

как сделать так, чтобы значение текстового поля пароля отображалось при наведении на значок

Добрый день всем,

У меня есть форма, которая имеет поле пароля:

<input type="password" name="password" size="30" />

Естественно, входной текст будет заменен на (*).

Поэтому, если пользователь набрал 123, в поле будет отображаться ***.

До этого, это прямо вперед, но ...

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

Таким образом, при наведении курсора на поле будет отображаться 123, а когда пользователь покинет значок, на поле снова будет отображаться ***.

Есть ли способ сделать это с помощью JavaScript? Также я использую HTML и PHP.

Правка:

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

П.С. Я гуглил и искал стекопоток, но безуспешно

26
SULTAN

Вам нужно будет получить текстовое поле с помощью javascript при наведении на него мыши и изменить его type на text. И при его перемещении вы захотите изменить его на password. Нет шансов сделать это в чистом CSS.

HTML:

<input type="password" name="password" id="myPassword" size="30" />
<img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />

JS:

function mouseoverPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "text";
}
function mouseoutPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "password";
}
33
Merlin Denker

Как сказали эти парни, просто измените тип ввода.
Но не забудьте также поменять тип обратно.

Посмотрите мою простую демонстрацию jquery: http://jsfiddle.net/kPJbU/1/

HTML:

<input name="password" class="password" type="password" />
<div class="icon">icon</div>

jQuery:

$('.icon').hover(function () {
    $('.password').attr('type', 'text');
}, function () {
    $('.password').attr('type', 'password');
});
14
Ruslan Ismagilov

Я использую эту строку кода, она должна сделать это:

<input type="password"
       onmousedown="this.type='text'"
       onmouseup="this.type='password'"
       onmousemove="this.type='password'">
7
user3334188

Завершите пример ниже. Я просто люблю копировать/вставить :) 

HTML

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
           <div class="panel panel-default">
              <div class="panel-body">
                  <form class="form-horizontal" method="" action="">

                     <div class="form-group">
                        <label class="col-md-4 control-label">Email</label>
                           <div class="col-md-6">
                               <input type="email" class="form-control" name="email" value="">
                           </div>
                     </div>
                     <div class="form-group">
                       <label class="col-md-4 control-label">Password</label>
                          <div class="col-md-6">
                              <input id="password-field" type="password" class="form-control" name="password" value="secret">
                              <span toggle="#password-field" class="fa fa-lg fa-eye field-icon toggle-password"></span>
                          </div>
                     </div>
                 </form>
              </div>
           </div>
      </div>
  </div>

CSS

.field-icon {
  float: right;
  margin-right: 8px;
  margin-top: -23px;
  position: relative;
  z-index: 2;
  cursor:pointer;
}

.container{
  padding-top:50px;
  margin: auto;
}

JS

$(".toggle-password").click(function() {
   $(this).toggleClass("fa-eye fa-eye-slash");
   var input = $($(this).attr("toggle"));
   if (input.attr("type") == "password") {
     input.attr("type", "text");
   } else {
     input.attr("type", "password");
   }
});

Попробуйте это здесь: https://codepen.io/anon/pen/ZoMQZP

5
Adrian P.

1 минута поиска в Google дала мне этот результат . Смотрите ДЕМО!

HTML

<form>
    <label for="username">Username:</label>
    <input id="username" name="username" type="text" placeholder="Username" />
    <label for="password">Password:</label>
    <input id="password" name="password" type="password" placeholder="Password" />
    <input id="submit" name="submit" type="submit" value="Login" />
</form>

jQuery

// ----- Setup: Add dummy text field for password and add toggle link to form; "offPage" class moves element off-screen
$('input[type=password]').each(function () {
    var el = $(this),
        elPH = el.attr("placeholder");
    el.addClass("offPage").after('<input class="passText" placeholder="' + elPH + '" type="text" />');
});
$('form').append('<small><a class="togglePassText" href="#">Toggle Password Visibility</a></small>');

// ----- keep password field and dummy text field in sync
$('input[type=password]').keyup(function () {
    var elText = $(this).val();
    $('.passText').val(elText);
});
$('.passText').keyup(function () {
    var elText = $(this).val();
    $('input[type=password]').val(elText);
});

// ----- Toggle link functionality - turn on/off "offPage" class on fields
$('a.togglePassText').click(function (e) {
    $('input[type=password], .passText').toggleClass("offPage");
    e.preventDefault(); // <-- prevent any default actions
});

CSS

.offPage {
    position: absolute;
    bottom: 100%;
    right: 100%;
}
3
DonJuwe

быстрый ответ не тестировался на нескольких браузерах, работает на gg chrome/win

-> На событии фокуса -> показать/скрыть пароль

<input type="password" name="password">

скрипт jQuery

// show on focus
$('input[type="password"]').on('focusin', function(){

    $(this).attr('type', 'text');

});
// hide on focus Out
$('input[type="password"]').on('focusout', function(){

    $(this).attr('type', 'password');

});
0
SNS - Web et Informatique

Это простой JavaScript. Закончено с помощью переключения атрибута type ввода. Проверьте это http://jsfiddle.net/RZm5y/16/

0
noob
   <script>
       function seetext(x){
           x.type = "text";
       }
       function seeasterisk(x){
          x.type = "password";
       }
   </script>
  <body>
    <img onmouseover="seetext(a)" onmouseout="seeasterisk(a)" border="0" src="smiley.gif"   alt="Smiley" width="32" height="32">
   <input id = "a" type = "password"/>
 </body>

Попробуйте это посмотреть, если это работает

0
shubhraj

Попробуй это :

В HTML:

<!-- An Input PassWord Field With Eye Font-Awesome Class -->
<input type="password" placeholder="Type Password">
      <i class="show-pass fa fa-eye fa-lg"></i>

В Jquery:

  // Convert Password Field To Text On Hover.
  var passField = $('.password');
  $('.show-pass').hover(function() {
      passField.attr('type', 'text');
  }, function() {
    passField.attr('type', 'password');
  })

В CSS, если вы любите его стилизовать.

.show-pass {
  position: absolute;
  top: 17px;
  right: -30px;
}

0
Wael Assaf