Почему поле пароля html становится пустым - PullRequest
Новая
       2

Почему поле пароля html становится пустым

0 голосов
/ 29 мая 2018

Я создаю поле пароля, где пользователь может либо скрыть / показать пароль, который он вводит.Ниже приведены HTML и JavaScript-код.Проблема заключается в том, когда я тестирую код в браузере: - Я ввожу пароль и нажимаю кнопку «показать / скрыть», пароль виден, и страница обновляется, а затем пароль исчезает.Как мне решить эту проблему?

html: 

<html>
<head>
    <meta charset="utf-8" />
    <title> Page Title </title>
    <meta name ="viewport" content="width= device-width, initial-scale=1">
    <script src="main.js"></script>
</head>
<body>
    <form action="">
        <input type="text" name="uid" placeholder="Username">
        <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
        <button onclick="changePwdView()"> Show/Hide </button>
        <button type="submit" name="submit"> Login </button>
    </form>
</body>
</html>

JS: 

let loginPwdStatus = false;

function changePwdView(){

    let getLoginInput = document.getElementById("loginPwdChange");

    if(loginPwdStatus === false){
        getLoginInput.setAttribute("type", "text");
        loginPwdStatus = true;

    }else if(loginPwdStatus === true){
        getLoginInput.setAttribute("type", "password");
        loginPwdStatus = false;

    }

}

Check the image

Ответы [ 4 ]

0 голосов
/ 29 мая 2018

<button type="button" onclick="changePwdView()"> Show/Hide </button> может помочь

Приветствия

0 голосов
/ 29 мая 2018

добавить type = "button" к кнопке показать / скрыть;

let loginPwdStatus = false;

function changePwdView(){

    let getLoginInput = document.getElementById("loginPwdChange");

    if(loginPwdStatus === false){
        getLoginInput.setAttribute("type", "text");
        loginPwdStatus = true;

    }else if(loginPwdStatus === true){
        getLoginInput.setAttribute("type", "password");
        loginPwdStatus = false;

    }

}
<html>
<head>
    <meta charset="utf-8" />
    <title> Page Title </title>
    <meta name ="viewport" content="width= device-width, initial-scale=1">
    <script src="main.js"></script>
</head>
<body>
    <form action="">
        <input type="text" name="uid" placeholder="Username">
        <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
        <button onclick="changePwdView()" type="button"> Show/Hide </button>
        <button type="submit" name="submit"> Login </button>
    </form>
</body>
</html>
0 голосов
/ 29 мая 2018

Это потому, что ваша кнопка показать / скрыть пароль отправляет форму.При нажатии кнопки «Показать / скрыть» необходимо запретить отправку формы.

Два возможных решения:

Только с HTML

Измените вашу кнопку на type="button".Это предотвратит отправку формы. 

let loginPwdStatus = false;

function changePwdView() {

  let getLoginInput = document.getElementById("loginPwdChange");

  if (loginPwdStatus === false) {
    getLoginInput.setAttribute("type", "text");
    loginPwdStatus = true;

  } else if (loginPwdStatus === true) {
    getLoginInput.setAttribute("type", "password");
    loginPwdStatus = false;
  }
}
<html>

<head>
  <meta charset="utf-8" />
  <title> Page Title </title>
  <meta name="viewport" content="width= device-width, initial-scale=1">
  <script src="main.js"></script>
</head>

<body>
  <form action="">
    <input type="text" name="uid" placeholder="Username">
    <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
    <button type="button" onclick="changePwdView()"> Show/Hide </button>
    <button type="submit" name="submit"> Login </button>
  </form>
</body>

</html>

С JavaScript

Вы можете сделать это с помощью preventDefault().

Помните следующее:

  • Передавайте параметр event в вашу функцию при нажатии кнопки: onclick="changePwdView(event)"
  • Не забудьте аргумент в вашем коде JS: function changePwdView(event) { ... }
  • Чтобы предотвратить отправку формы, используйте event.preventDefault();

let loginPwdStatus = false;

function changePwdView(event) {
  event.preventDefault();

  let getLoginInput = document.getElementById("loginPwdChange");

  if (loginPwdStatus === false) {
    getLoginInput.setAttribute("type", "text");
    loginPwdStatus = true;

  } else if (loginPwdStatus === true) {
    getLoginInput.setAttribute("type", "password");
    loginPwdStatus = false;
  }
}
<html>

<head>
  <meta charset="utf-8" />
  <title> Page Title </title>
  <meta name="viewport" content="width= device-width, initial-scale=1">
  <script src="main.js"></script>
</head>

<body>
  <form action="">
    <input type="text" name="uid" placeholder="Username">
    <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
    <button onclick="changePwdView(event)"> Show/Hide </button>
    <button type="submit" name="submit"> Login </button>
  </form>
</body>

</html>
0 голосов
/ 29 мая 2018

Измените свой тег кнопки на type="button"

<html>
<head>
    <meta charset="utf-8" />
    <title> Page Title </title>
    <meta name ="viewport" content="width= device-width, initial-scale=1">
    <script src="main.js"></script>
</head>
<body>
    <form action="">
        <input type="text" name="uid" placeholder="Username">
        <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
        <button onclick="changePwdView()"> Show/Hide </button>
        <button type="button" name="submit"> Login </button>
    </form>
</body>
</html>

И затем вы можете добавить обработчик для вызова ajax при Login нажатии кнопки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...