Javascriptでテキストフィールドからパスワードフィールドに変更する

こんにちは。
職人見習いの高嶋です。


用途はあまりないかもしれませんが、Javascriptでテキストフィールドからパスワードフィールドに変更するTipsです。

そもそも何故こういうニーズが発生したかといいますと、iPadでのWebコンテンツ制作過程で
BlueTooth対応バーコードリーダーで読み込まれた英数字をこのフィールドにINPUTして
且つリーダー機能のEnterで処理を発生させるというものがありました。

問題はiPadのソフトウェアキーボードが日本語変換モード状態でリーダーを使用すると
文字列を読み込んだ後の自動Enter機能がForm Submitではなく文字変換候補確定に充てられてしまう事でした。

その為、無理はありますがEnter機能を効かせたい場合に
日本語モードの存在しないパスワードフィールドに切り替える必要がありました。
※前提として最初はテキストフィールドで使用しなければいけませんでした。

では実際に試してみます。

<input type="text" id="hoge" name="hoge" />

上記をあるタイミングでパスワードフィールドに変更します。
最初にJQueryのような形で試してみました。

$("#hoge").replaceWith('<input type="password" id="hoge" name="hoge" />');

上記で変更することができました。
これで良いのですが、私の実現させたい機能としては問題がありました。
元々HTMLファイルに書いていたテキストフィールドはEnterイベントを取得出来ていたのですが、
動的に切り替えたパスワードフィールドはEnterイベントを取得できませんでした。

そこで、次の方法です。

var fragment = document.createDocumentFragment();
var node = document.createElement("input");
node.setAttribute("type", "password");
node.setAttribute("id", "hoge");
node.setAttribute("name", "hoge");
fragment.appendChild(node);
$("#hoge").replaceWith(fragment);

JQueryのHTML展開を利用しない形でも現象は変わらずでした。

そして、TYPE属性を変えることで問題が解決しました。
あまりJavascript上でのパラメータ特定の為のループは好ましくはないのですが。

var inputParams = document.getElementsByTagName('input');
for( var i = 0; i < inputParams.length; i++ )
{
 if( inputParams[i].id != 'inputField' ){ continue; }
 inputParams[i].type = 'passowrd';
 break;
}

※この記事は、なかの人（piro556）が書いています。