8

幼い子供向けのサイトのアクセシビリティを改善したいと考えています。キーボードのスキルが低いため、文字が見えずにパスワードを入力するのは難しいという苦情が多く寄せられます。

パスワードを完全にマスク解除したくはありませんが、マスクされる前に現在の文字のみが数秒間表示される携帯電話スタイルを使用することを考えていました.

私が見ることができるこれに対するJavaScriptソリューションを知っている人はいますか、またはこのテクニックが実際に何と呼ばれているので、より効果的にグーグルすることができますか?

パスワード自体が隠しフィールドに保存されている間に onChange イベントを使用してプレーンテキストフィールドを更新する基本的な概念実証を実装しましたが、これが最善のアプローチであるかどうかはわかりません。

アップデート：

クリア テキスト フィールドを使用したくない理由は、システムが教師を含む学校で使用されているためです。たとえば、年長の生徒の 1 人が教師の管理者パスワードを取得できた場合、多くの混乱を引き起こす可能性があります。

切り替え可能なクリアテキスト/パスワード フィールドを持つことは興味深いアイデアであり、遅延マスキング方法よりも簡単であることが証明される可能性があります。

4

5 に答える 5

8

子供 (または大人) の入力スキルが貧弱すぎてパスワード フィールドを使用できない場合、入力した文字を数秒間表示するだけで本当に役立つと思いますか? 下手なタイピストは、画面ではなくキーボードに集中しませんか?

最も簡単な解決策は、おそらく Vista のネットワーク パスワード フィールドのようなことを行うことです。通常の入力フィールドとパスワード フィールドを切り替えるチェック ボックスを用意する (そして適切なデフォルトを選択する) か、ログインが重要でない場合は、単にプレーンな入力フィールド。

于 2009-05-22T10:09:27.793 に答える
6

サイトが本当に幼い子供向けである場合、プレーン テキスト フィールドにパスワードを入力させてはいけないのでしょうか? クレジットカードの詳細を保存するわけではありません。

于 2009-05-22T10:09:14.080 に答える
5

今使っているのとは逆のことをして（大人に）、子供たちのレッスンの機会に変えるかもしれません。

つまり、フィールドを通常の入力フィールドにし、その下に「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>
于 2009-05-22T10:50:32.157 に答える
3

他の回答に加えて。パスワード フィールドの近くに仮想キーボードを配置することもできます。クリックしてパスワードを入力できるようにします。

于 2009-05-22T10:12:26.167 に答える
0

display:none; のスタイルを持つ実際のパスワード フィールドが必要だと思います。隠しフィールドの代わりに。そして、一度だけ実行されるそのフィールドの onchange イベントは、概念実証テキスト フィールドにマスクを入れます..ブラウザの組み込みの保存パスワードが機能するようにします。他の人が示唆しているように、「パスワードを表示」トグルボックスも問題ありません。問題は、保存されたフォーム データの自動入力が、ウィンドウのロード イベントの後、また dom-ready イベント (jquery によって使用される) の後に発生する傾向があるため、非表示のパスワード フィールドの onchange に結び付ける必要があることです。

于 2009-05-23T02:41:41.120 に答える