Ввод пароля в стиле «телефон» с использованием JavaScript - PullRequest
Новая
       32

Ввод пароля в стиле «телефон» с использованием JavaScript

8 голосов
/ 22 мая 2009

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

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

Кто-нибудь знает какие-либо javascript-решения для этого, на которые я могу взглянуть, или даже как на самом деле называется эта техника, чтобы я мог использовать ее более эффективно?

Я реализовал базовое доказательство концепции, которое использует события onChange для обновления простого текстового поля, в то время как сам пароль хранится в скрытом поле, но я не уверен, что это лучший подход.

Обновление:

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

Наличие переключаемого поля открытого текста / пароля является интересной идеей и может оказаться проще, чем метод отложенного маскирования.

Ответы [ 5 ]

8 голосов
/ 22 мая 2009

Если ребенок (или взрослый в этом отношении) имеет слишком слабые навыки печати, чтобы иметь возможность использовать поле пароля, вы действительно думаете, что показ буквы, набранной за несколько секунд, действительно помогает? Разве бедная машинистка не фокусируется на клавиатуре, а на экране?

Возможно, самое простое решение - это сделать что-то вроде поля сетевого пароля в Vista: иметь флажок, который переключает между обычным полем ввода и полем пароля (и выбрать разумное значение по умолчанию), или если логин не чувствителен в любом случае просто используйте простое поле ввода.

6 голосов
/ 22 мая 2009

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

5 голосов
/ 22 мая 2009

Я бы, вероятно, сделал бы то, что я сейчас использую (со взрослыми), и превратил бы это в возможность для урока для детей.

То есть, чтобы сделать поле обычным полем ввода, затем добавьте ссылку под ним, которая гласит « HIDE ».

Нажатие на ссылку " HIDE " переключит ее на " SHOW ", и содержимое поля пароля будет помечено звездочкой , Нажатие на « SHOW » приведет к обратному результату.

Я бы представил на детском сайте, что у вас есть значки для чего-то вроде " Что это ?". Если это так, то переключатель HIDE / SHOW даст возможность описать, почему нужно скрывать свой пароль.

ПРИМЕР (сечение. Обратите внимание, что XDOM - это объект, который нормализует функции DOM в разных браузерах.) 

...
function init() 
{
    pwdEl = XDOM.getElementById('pass');
    pwdClr = XDOM.getElementById('logindisplay');
    toglLnk = XDOM.getElementById('showhidepwd');
    pwdClr.style.display = "none"; //initiate 

    function mirrorType(e) 
    {
        pwdClr.innerHTML = pwdEl.value;
    }
    function toggleMirror(e) 
    {
        var toggle = pwdClr.style.display;
        if (toggle == "none") {
            pwdClr.style.display = "inline";
            toglLnk.innerHTML = "hide";
        } else {
            pwdClr.style.display = "none";
            toglLnk.innerHTML = "show";
        }
        pwdClr.innerHTML = pwdEl.value;
        XDOM.stopPropagation(e);
        XDOM.preventDefault(e);
    }
    XDOM.addListener(pwdEl, 'keyup', mirrorType, false);
    XDOM.addListener(toglLnk, 'click', toggleMirror, false);
}
window.onload = init;
</script>
<style type="text/css">
#logindisplay {display:none;}
.row {display:table-row; padding:4px;}
.cell {display:table-cell; padding:4px;}
</style>
</head>
<body>
<div>
    <h2>Test Show-Hide Login</h2>
    <form>
        <div class="row">
            <p class="cell">
                <label for="pass">Password</label> 
            </p>
            <p class="cell">
                <input type="password" id="pass" name="pass" value="" size="15" maxlength="15" />
                <br /><a href="#jsenable" id="showhidepwd"><span id="togglelogin">show</span></a> 
                <span id="logindisplay" style="display:none;"> </span>
            </p>
        </div>
    </form>
    <p id="jsenable"><!-- a note about enabling JavaScript here --></p>
</div>
3 голосов
/ 22 мая 2009

В дополнение к другим ответам. Вы также можете иметь виртуальную клавиатуру рядом с полем пароля. Чтобы они могли нажать и ввести пароль.

0 голосов
/ 23 мая 2009

Я думаю, у вас должно быть реальное поле пароля с символом отображения: нет; вместо скрытого поля; и событие onchange для этого поля, которое запускается только один раз, помещая маску в текстовое поле подтверждения концепции ... так, чтобы встроенный в браузер пароль сохранения мог работать. Как и другие предлагали, переключатель «показать пароль» тоже не повредит. Проблема заключается в том, что автозаполнение сохраненных данных формы имеет тенденцию происходить после события загрузки окна, а также после события dom-ready (используется jquery), поэтому необходима привязка к полю скрытого пароля.

...