フォームのpasswordとtextをjQueryで切り替えて
2014/07/03
パスワード入力の際、大抵｢●●●｣みたいな形で隠されるが、
jQueryでそれを見えるようにするというもの。
パスワードはPC(ブラウザ)に保存されているから
サイトにはログインできるけど、他のところに入れない
とかいった問い合わせとかがしばしばあるので、
考えようによっては使えそう。
■参考サイト
http://www.skuare.net/test/junMasking.html
■サンプル
http://sample.taitan916.info/passmie/
■ソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$('#showcharacters').click(function() {
if ($(this).attr('checked')) { //チェック状態であればパスワードを表示
$('#password').replaceWith('<input type="text" name="password" id="password" value="' + $('#password').attr('value') + '" />');
} else { //チェックがなければパスワードを隠す
$('#password').replaceWith('<input type="password" name="password" id="password" value="' + $('#password').attr('value') + '" />');
}
});
});
</script>
<title>パス見え</title>
</head>
<body>
<h1>パス見え</h1>
<form>
パスワード：<input id="password" name="password" type="password" />
</form>
<input id="showcharacters" name="showcharacters" type="checkbox" /> 確認する
</body>
</html>
■その他
見たこと無いのがreplaceWith。
使ったこと無いのがattr。
・replaceWith
http://semooh.jp/jquery/api/manipulation/replaceWith/content/
全ての要素を、指定されたHTMLやDOM Elementで置き換える。
・attr
http://semooh.jp/jquery/api/attributes/attr/name/
最初の要素が持つ指定属性の値を返す。
要素が指定属性を持っていない場合、関数はundefinedを返す。
.html()と.val()みたいな感じなんでしょうか。
関連記事
-
-
画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdro ...
-
-
jQselectableでセレクトボックスをリッチにする
入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...
-
-
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)
やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...
-
-
submit関連のjQuery
<?php //jQueryでのsubmit,エンターキーでのsubmit ...
-
-
配列をjQueryで取り扱う
やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...
-
-
jQueryでjsonデータを処理(parseJSON)
他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...
-
-
AjaxFileUploadで処理は実行できてもエラーが返る
AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...
-
-
jQueryでIPから位置情報の取得
jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...
-
-
jQueryのCSS変更
jQueryでCSSを触る際、 $("#aaa").css('height',' ...
-
-
スマホ対応カルーセルスライダーslickの使い方
イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...
- PREV
- シンタックスシュガー
- NEXT
- CSSでセンターリング