今日は、シンプルな JavaScript で作成された可変ダイナミックパスワード入力コントロールを共有します。このコントロールは、ダイナミックに数字キーボードを生成して表示し、クリックごとにパスワードキーボードを再読み込みすることができます。また、手動で非表示や表示の制御、手動でリフレッシュなどの機能も実現できます。
オンラインバンキングや一部のゲームサイトに頻繁にこのコントロールを見ることがあるかもしれませんが、実装は実際には複雑ではありません。主にランダムな数字を生成し、ハッシュアルゴリズムを使用して数字の位置を配置しています。ここでは、最もシンプルなプレースホルダーアルゴリズムを使用しています。効率は比較的低いですが（O (n^2)）、10 個の数字を処理するのに十分です。アルファベットキーボードや特殊文字も含める場合は、アルゴリズムを変更することをお勧めします。
最初のダイナミックパスワードキーボードのコードは以下の通りです：
// 数字キーボードの初期化
function initNum(line){
var strHtml = "";
var arr = new Array()
if(line < 1 || line > 10){
return;
}
// ランダムな配列の作成
while(arr.length < 10){
//0 から 9 までの整数を取得
var num = Math.floor(10*Math.random());
// 配列を走査して空きスペースを見つける
var flag = false;
for(var i=0 ; i < arr.length ;i++){
if(arr[i] == num){
flag = true;
break;
}
}
if(!flag){
arr[arr.length] = num;
}
}
以下はすべての JS コードですが、シンプルな実装なのでオブジェクトのカプセル化は行っていません。
// グローバルコンテナ ID の定義
var OBJID = "layerDisplay";
// オブジェクトセレクター
function $(obj) {
return document.getElementById(obj);
}
// キーボードコントロールのロード
function load() {
var id = OBJID;
// 内部 HTML を制御
$(id).innerHTML = "";
// コントロールを再読み込み
$(id).innerHTML = getControl();
// 表示
$(id).style.display = "block";
}
// 非表示
function hide(){
var id = OBJID;
$(id).style.display = "none";
}
// コントロールの取得
function getControl(){
var strHtml = "";
// キーボードの初期化
strHtml += initNum(5);
//OK ボタン
strHtml += "";
// 非表示ボタン
strHtml += "";
// ボタンを設定して表示
return strHtml;
}
function addNum(obj){
var strVal = null;
// 空のオブジェクト
if(null == obj){
return;
}
// 空の文字列または無効な文字列
strVal = obj.value;
if("" == strVal
|| 0 == strVal.length) {
return;
}
// 文字を追加
$("txtDisplay").value += strVal
//
load()
}
// 数字キーボードの初期化
function initNum(line){
var strHtml = "";
var arr = new Array()
if(line < 1 || line > 10){
return;
}
// ランダムな配列の作成
while(arr.length < 10){
//0 から 9 までの整数を取得
var num = Math.floor(10*Math.random());
// 配列を走査して空きスペースを見つける
var flag = false;
for(var i=0 ; i < arr.length ;i++){
if(arr[i] == num){
flag = true;
break;
}
}
if(!flag){
arr[arr.length] = num;
}
}
// ボタンリストの出力
for(var i = 9; i >= 0 ; i --) {
strHtml += '';
// 改行の制御
if(0 == (i % line)){
strHtml += '
';
}
}
return strHtml
以下はダイナミックパスワード入力コントロールのデモアドレスです http://www.lidaren.com/code/jspassctrl/jspassctrl.html
以下はダイナミックパスワード入力コントロールのデモ画像です。画像 1
画像 2