Подмена полей

Serafim1991 · April 9, 2012

Не работает подмена полей

Должно быть: если чекбокс установлен, то вместо символов "*" в поле "Пароль" выводятся сами символы(цифры или буквы, не важно). Иначе - символы "*"

И вроде как все правильно, но не работает подмена, хоть ты тресни.

UPD: на jsfiddle работает при подключении любой из версий jQuery, но вот на форме - отказывается работать.

Вот полный код формы(php код я убрал. Может проблема в нем?)


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Регистрационная форма</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
$('#check').change(function() {
    var $pass = $('#pass');

    if (!$pass.next().is('.pass-show')) {
        $('<input class="pass-show">').val($pass.val()).hide().insertAfter($pass);
    }

    if ($(this).is(':checked')) {
        $pass.hide().next().show();
    }
    else {
        $pass.show().next().hide();
    }
});
</script>
<script>
$(document).ready(function()
                   {
                       $('input, select, textarea').focus(function()
                                        {
                                            $(this).parent('li').addClass('active');
                                        });
                       $('input, select, textarea').blur(function()
                                       {
                                           $(this).parent('li').removeClass('active');
                                       });
                                    document.cookie="TestCookie=12345678";
                   });
</script>



<link rel="stylesheet" type="text/css" href="StyleSheet.css">
</head>

<body>
<form action=" " method="POST" id="payment" >
  <fieldset >
        <legend>Форма для входа</legend>
          <ol>
                  <li>
                          <label for="login">Логин</label>
                          <input id="login" name="login" type="text" placeholder="Введите логин" required >
                         <div></div>
                  </li>
                    <li>
                          <label for="pass">Пароль</label>
                          <input id="pass" name="pass" type="password" placeholder="Введите пароль" required>
                           <input type="checkbox" id="check"> Включить отображение пароля
                          <div></div>
                  </li>
          </ol>
  </fieldset>
    <br/>
 <button  type="submit">Отправить</button> 
    <button class="reset" type="reset">Очистить</button>
    <a href="/register.php">Регистрация</a>
  </form>

</body>
</html>

Edited April 9, 2012 by Serafim1991

hypnocolor · April 9, 2012

В HTML изменить:

<input type="checkbox" id="check" onchange="passtext();"> Включить отображение пароля

И JS:


function passtext(){
  var passinput = document.getElementById('pass');
  (passinput.type == 'password') ? passinput.type = 'text' : passinput.type = 'password';
}
</script>

Edited April 10, 2012 by hypnocolor

Serafim1991 · April 10, 2012

Благодарю.

Great Rash · April 10, 2012

ИЕ, по крайней мере 7 (и наверно 8) не дает менять тип поля ввода скриптом.

Serafim1991 · April 10, 2012

Я с ИЕ не дружу вообще.

Он все портит) Ну или просто я не умею его готовить.

Все проверялось в Хроме, но не работало(

Great Rash · April 10, 2012

Сделайте два поля:

1) <input type="password" />

2) <input type="text" />

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

Serafim1991 · April 10, 2012

Меня пока устраивает вариант, описанный во втором сообщении.

Но до сих пор очень интересно - почему же на jsfiddle.net мой скрипт работает нормально, а на форме - нет. Хотя все действия - идентичны.

Great Rash · April 10, 2012

Но до сих пор очень интересно - почему же на jsfiddle.net мой скрипт работает нормально, а на форме - нет. Хотя все действия - идентичны.

На jsfiddle стоит автоматический ready, а у себя вы его не прописали. Поэтому скрипт не находит указанный объект. Так должно рабтать:


$(function() {
  $('#check').change(function() {
    var $pass = $('#pass');

    if (!$pass.next().is('.pass-show')) {
      $('<input class="pass-show">')
      .val($pass.val())
      .hide()
      .insertAfter($pass);
    }

    if ($(this).is(':checked')) {
        $pass.hide().next().show();
    } else {
        $pass.show().next().hide();
    }
  });

  $('input, select, textarea').focus(function() {
    $(this)
    .parent('li')
    .addClass('active');
  });

  $('input, select, textarea').blur(function() {
    $(this)
    .parent('li')
    .removeClass('active');
  });
});

Serafim1991 · April 10, 2012

Да, работает.

Спасибо.

Sign In

Подмена полей

Question

Serafim1991

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

hypnocolor

Link to comment

Share on other sites

Serafim1991

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Serafim1991

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Serafim1991

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Serafim1991

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information