Today I want to share a simple JavaScript-written and implemented variable dynamic password input control. It can dynamically generate a numeric keyboard and display it. It can also reload the password keyboard after each click, manually control hiding and showing, and manually control refreshing, among other functions.
I believe friends who frequently log in to online banking or certain game websites should often see this control. In fact, the implementation principle is not complicated. It mainly generates numbers randomly and arranges their positions using a hash algorithm. Here, the simplest placeholder algorithm is used. Although the efficiency is relatively low (O(n^2)), it is sufficient for handling 10 numbers (worst case is 55 times). If you include an alphanumeric keyboard and special characters, it is recommended to change the algorithm.
The initial dynamic password keyboard code using the priority placeholder algorithm is as follows:
// Initialize the numeric keyboard
function initNum(line){
var strHtml = "";
var arr = new Array()
if(line < 1 || line > 10){
return;
}
// Generate random array
while(arr.length < 10){
// Get an integer between 0 and 9
var num = Math.floor(10*Math.random());
// Traverse the array to find an empty position
var flag = false;
for(var i=0 ; i < arr.length ;i++){
if(arr[i] == num){
flag = true;
break;
}
}
if(!flag){
arr[arr.length] = num;
}
}
The following is the complete JS code. Since it is a simple implementation, there is no need for object encapsulation.
// Define global container ID
var OBJID = "layerDisplay";
// Object selector
function $(obj) {
return document.getElementById(obj);
}
// Load the keyboard control
function load() {
var id = OBJID;
// Control the inner HTML
$(id).innerHTML = "";
// Reload the space library
$(id).innerHTML = getControl();
// Show
$(id).style.display = "block";
}
// Hide
function hide(){
var id = OBJID;
$(id).style.display = "none";
}
// Get the control
function getControl(){
var strHtml = "";
// Initialize the keyboard
strHtml += initNum(5);
// OK button
strHtml += "";
// Hide button
strHtml += "";
// Set the button and display it
return strHtml;
}
function addNum(obj){
var strVal = null;
// Null object
if(null == obj){
return;
}
// Empty string or invalid string
strVal = obj.value;
if("" == strVal
|| 0 == strVal.length) {
return;
}
// Append character
$("txtDisplay").value += strVal
//
load()
}
// Initialize the numeric keyboard
function initNum(line){
var strHtml = "";
var arr = new Array()
if(line < 1 || line > 10){
return;
}
// Generate random array
while(arr.length < 10){
// Get an integer between 0 and 9
var num = Math.floor(10*Math.random());
// Traverse the array to find an empty position
var flag = false;
for(var i=0 ; i < arr.length ;i++){
if(arr[i] == num){
flag = true;
break;
}
}
if(!flag){
arr[arr.length] = num;
}
}
// Output button list
for(var i = 9; i >= 0 ; i --) {
strHtml += '';
// Control line break
if(0 == (i % line)){
strHtml += '
';
}
}
return strHtml
The following is the demo address for the dynamic password input control: http://www.lidaren.com/code/jspassctrl/jspassctrl.html
The following is the demo image for the dynamic password input control:
Image 1
Image 2