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

Я создаю поле пароля, где пользователь может либо скрыть / показать пароль, который он вводит. Ниже приведены коды 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;

    }

}

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

Помимо type = "button", вы можете заменить весь блок if / then / else одной строкой: getLoginInput.type = getLoginInput.type === 'text'? 'пароль': 'текст';

— 29.05.2018 09:09

@BlackCat Вам нужно отправить форму обратно на сервер?

— 29.05.2018 09:15

На данный момент мне не нужно

— 29.05.2018 09:16

javascript html forms passwords

29.05.2018 08:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Измените тег кнопки на 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

29.05.2018 09:02

добавить 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>

29.05.2018 09:06

Ответ принят как подходящий

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

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

Только с 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>

29.05.2018 09:07

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

Ваше здоровье

29.05.2018 09:17