勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

フォームの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()みたいな感じなんでしょうか。

 - jQuery

  関連記事

jquery_logo
配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

jquery_logo
imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

jquery_logo
要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

jquery_logo
chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

jquery_logo
jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

jquery_logo
classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

jquery_logo
テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

jquery_logo
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...

jquery_logo
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

jquery_logo
jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...