パスワードマスクの解除と再設定
パスワードマスクの解除と再設定の切り替え
jQuery
$(function () {
$('#switching').click(function() {
// 入力値
var pw_val = $('#pw').val();
// 属性
var type = $('#pw').attr('type');
if (type == 'password') {
type = 'text';
// 切り替えボタンのラベル
$('#switching').val('パスワードマスク設定');
// input type="text"では送信させない
$('input[type=submit]').prop('disabled', true);
} else {
type = 'password';
$('#switching').val('パスワードマスク解除');
$('input[type=submit]').prop('disabled', false);
}
// input type="password" / input type="text" を生成
var input = '<input type=\"' + type + '\" id=\"pw\">';
$('span').html(input);
$('#pw').attr({
name: 'pw',
value: pw_val,
autocomplete: 'off'
});
});
});
HTML
<input type="button" id="switching" value="パスワードマスク解除">
<span><input type="password" id="pw" name="pw" autocomplete="off"></span>
<input type="submit" id="submit">
サンプル
2009年に「パスワードを隠すのをやめよう」とニールセン博士が提唱したことで話題に。 その後、ちらほらとパスワードマスキングを解除するサイトが登場したが浸透するほどではない状況。
