<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Password &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/password/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Tue, 18 Jan 2011 02:11:39 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>JavaScriptで「パスワードを表示」機能を実装してみる</title>
		<link>https://blog.mach3.jp/2011/01/18/javascript-password-toggle.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Tue, 18 Jan 2011 02:11:39 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[Browser]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Password]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=1437</guid>

					<description><![CDATA[通常なら文字が伏せてある状態のパスワード入力フォームですが、 入力したパスワードを確認する為の「パスワードを表示」機能を JavaScriptで実装する為のメモです。（jQuery使用） ざっくりとした仕掛け チェックボ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>通常なら文字が伏せてある状態のパスワード入力フォームですが、<br />
入力したパスワードを確認する為の「パスワードを表示」機能を<br />
JavaScriptで実装する為のメモです。（jQuery使用）</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh4.ggpht.com/_JJkNs5Ixl70/TTSLFjwxAHI/AAAAAAAABJo/qKQvnTxJ7io/201101180330.png" alt="JavaScriptで「パスワードを表示」機能を実装してみる"/></figure>



<p></p>



<span id="more-1437"></span>



<ol class="wp-block-list">
<li>ざっくりとした仕掛け</li>



<li>IE兄弟はinput要素のtype属性をいじれないらしい</li>



<li>textとpasswordを並べて表示/非表示をトグルする</li>



<li>コード抜粋</li>
</ol>



<h2 class="wp-block-heading">ざっくりとした仕掛け</h2>



<p>チェックボックスにチェックを入れると、<br />
パスワードのtypeが<em>text</em>に切り替わって内容が確認出来るようになる仕組み。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh3.ggpht.com/_JJkNs5Ixl70/TTSLFy-TuyI/AAAAAAAABJw/xTl8BbYjSXI/201101180231.png" alt="ざっくりとした仕掛け"/></figure>



<p></p>



<p><em>type直接いじれば楽じゃーん。</em><br />
そう考えていた時代が僕にもありました。</p>



<h2 class="wp-block-heading">IE兄弟はinput要素のtype属性をいじれないらしい</h2>



<p>ところがIEはinput要素のtype属性を弄ろうとするとエラーになります。<br />
その為jQueryでも、attr()で同様の処理を行おうとすると、以下の例外が投げられてきます。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>type property can&#8217;t be changed</p>
</blockquote>



<p>HTML</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"foo"</span> /&gt;</span>
</code></span></pre>


<p>JavaScript</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">try</span> {
    $(<span class="hljs-string">"#foo"</span>).attr(<span class="hljs-string">"type"</span>, <span class="hljs-string">"text"</span> );
} <span class="hljs-keyword">catch</span>( e ){
    <span class="hljs-built_in">console</span>.log( e ); <span class="hljs-comment">// type property can't be changed</span>
}
</code></span></pre>


<p>cloneNode等で複製したオブジェクトでも同様なので、<br />
これを回避する為には手作業で要素の複製を行い、<br />
それでもって元の要素とスワップしなければならないみたいです。面倒ですね！</p>



<h2 class="wp-block-heading">textとpasswordを並べて表示/非表示をトグルする</h2>



<p>面倒なのは回避する事にして、<br />
<em>input[type=text]</em>と<em>input[type=password]</em>を並べておき<br />
表示/非表示を切り替える方向でやってみます。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh4.ggpht.com/_JJkNs5Ixl70/TTSLF1EUU9I/AAAAAAAABJs/bdY4vXqHq84/201101180318.png" alt="textとpasswordを並べて表示/非表示をトグルする"/></figure>



<p></p>



<ol class="wp-block-list">
<li>input[type=text]とinput[type=password]の入力内容を同期させる</li>



<li>チェックボックスのON/OFFでそれぞれの表示/非表示を切り替える</li>
</ol>



<h2 class="wp-block-heading">コード抜粋</h2>



<p>こんな感じになりました。</p>



<p><a href="http://jsfiddle.net/mach3ss/Dk448/">DEMO ( jsFiddle )</a></p>



<h3 class="wp-block-heading">HTML</h3>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pswd"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pswd"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pswd-text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pswd-text"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display:none;"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"pswd-toggle"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pswd-toggle"</span> <span class="hljs-attr">data-for</span>=<span class="hljs-string">"pswd"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"pswd-toggle"</span>&gt;</span>パスワードを表示する<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
</code></span></pre>


<p><em>パスワード（#pswd）</em>の相方となる<em>テキストフィールド（#pswd-text）</em>を非表示にして設置。<br />
<em>チェックボックス（#pswd-toggle）</em>には、<em>data-for</em>属性で対象のID(pswd)を入れておきます。<br />
ちょうど、label要素のfor属性のように。</p>



<h3 class="wp-block-heading">JavaScript</h3>


<pre class="wp-block-code"><span><code class="hljs language-javascript">$.fn.extend({
    <span class="hljs-attr">togglePassword</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> config </span>)</span>{
        option = $.extend({
            <span class="hljs-string">"postfix"</span> : <span class="hljs-string">"-text"</span>
        }, config );
        <span class="hljs-comment">// 入力内容を同期するfunction</span>
        sync = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">var</span> i = <span class="hljs-keyword">this</span>.type.toUpperCase() === <span class="hljs-string">"PASSWORD"</span> ?
                <span class="hljs-keyword">this</span>.id + option.postfix :
                <span class="hljs-keyword">this</span>.id.replace( option.postfix, <span class="hljs-string">""</span> );
            $( <span class="hljs-string">"#"</span> + i ).val( $(<span class="hljs-keyword">this</span>).val() );
        };
        <span class="hljs-comment">// 表示/非表示を切り替えるfunction</span>
        toggle = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">if</span>( <span class="hljs-keyword">this</span>.checked ){
                $.data( <span class="hljs-keyword">this</span>, <span class="hljs-string">"pswd"</span> ).hide();
                $.data( <span class="hljs-keyword">this</span>, <span class="hljs-string">"text"</span> ).show();
            } <span class="hljs-keyword">else</span> {
                $.data( <span class="hljs-keyword">this</span>, <span class="hljs-string">"pswd"</span> ).show();
                $.data( <span class="hljs-keyword">this</span>, <span class="hljs-string">"text"</span> ).hide();
            }
        };
        <span class="hljs-keyword">this</span>.each( <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">var</span> id, pswd, text, check, handlers;
            id = <span class="hljs-keyword">this</span>.getAttribute( <span class="hljs-string">"data-for"</span> );
            pswd = $(<span class="hljs-string">"#"</span> + id );
            text = $(<span class="hljs-string">"#"</span> + id + option.postfix );
            check = $(<span class="hljs-keyword">this</span>);
            <span class="hljs-comment">// テキストフィールドのイベント</span>
            handlers = { <span class="hljs-attr">keyup</span> : sync, <span class="hljs-attr">blur</span> : sync };
            pswd.bind( handlers );
            text.bind( handlers );
            <span class="hljs-comment">// チェックボックスのイベント</span>
            $.data( <span class="hljs-keyword">this</span>, <span class="hljs-string">"pswd"</span>, pswd );
            $.data( <span class="hljs-keyword">this</span>, <span class="hljs-string">"text"</span>, text );
            $(<span class="hljs-keyword">this</span>).click( toggle );
            <span class="hljs-comment">// 初期化</span>
            toggle.apply( <span class="hljs-keyword">this</span> );
        });
    }
});

$(<span class="hljs-string">"#pswd-toggle"</span>).togglePassword();
</code></span></pre>


<p>IEスルーするなら恐ろしく短いコードで済みそうですが…残念。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
