share facebook facebook twitter menu hatena pocket slack

2012.01.30 MON

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

櫛田 草平

WRITTEN BY 櫛田 草平

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

用途はあまりないかもしれませんが、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)が書いています。

櫛田 草平

櫛田 草平

cloudpackで運用、保守、構築、夜間対応を担当しており、日々様々な課題に対応していますのでこの経験を記事にしていけたらと思います。 櫛田 草平

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。