こんにちは。
職人見習いの高嶋です。
用途はあまりないかもしれませんが、Javascriptでテキストフィールドからパスワードフィールドに変更するTipsです。
そもそも何故こういうニーズが発生したかといいますと、iPadでのWebコンテンツ制作過程でBlueTooth対応バーコードリーダーで読み込まれた英数字をこのフィールドにINPUTして且つリーダー機能のEnterで処理を発生させるというものがありました。
問題はiPadのソフトウェアキーボードが日本語変換モード状態でリーダーを使用すると文字列を読み込んだ後の自動Enter機能がForm Submitではなく文字変換候補確定に充てられてしまう事でした。
その為、無理はありますがEnter機能を効かせたい場合に日本語モードの存在しないパスワードフィールドに切り替える必要がありました。
※前提として最初はテキストフィールドで使用しなければいけませんでした。
では実際に試してみます。
>
上記をあるタイミングでパスワードフィールドに変更します。
最初にJQueryのような形で試してみました。
$("#hoge").replaceWith('');
上記で変更することができました。
これで良いのですが、私の実現させたい機能としては問題がありました。
元々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 {
if( inputParams[i].id != 'inputField' ){ continue; }
inputParams[i].type = 'passowrd';
break;
}
※この記事は、なかの人（piro556）が書いています。
