First, I am using html, js, and api of some company to create a page for webview. Api is not an important part of the question, so you can ignore it.
I am making a password pop-up using six input tags. I set the number type to float the number pad and gave it masking css.
And the event was written so that only the numbers were entered. I'm sorry for the messy code because the plan keeps changing.
Anyway, this is the only way to deal with passwords. But the masking keeps getting a delay for 1 or 2 seconds.
But I don't want a masking. Can the password masking be done delay by self? Or is there a reason I don't know? Guys, help me...
This phenomenon was the same when it was text type. What's interesting is that when you change the type to jquery as an attr() function, it won't become a delay. But then I can't get the number pad I want.
Thank you for taking a look at my poor English.
function inputPassword(element, _this, key) {
var idx = $(element).index(_this);
var length = $(element).length;
if (key != 8 && key != 12) key = $(_this).val();
switch (checkKey(key)) {
case 0:
$(_this).val("");
idx--;
break;
case -1:
$(_this).val("");
break;
default:
idx++;
break;
}
if (idx == -1 || idx == length) return;
$(element).eq(idx).focus();
}
function checkKey(key) {
if (key === 8 || key === 12) return 0;
if (key && /^[0-9]*$/.test(key)) return 1;
else return -1;
}input[class=pwd],
input[class=pwd1],
input[class=pwd2] {
-webkit-text-security: disc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$('#regPopup .pwd1').on('keyup', function(e) {
inputPassword('#regPopup .pwd1', this, e.keyCode);
});</script><div class="input_pw"><span><input type="number" pattern="[0-9]*" inputmode="numeric" class="pwd1" tabindex="-1" maxlength="1" id="pwd1"></span><span><input type="number" pattern="[0-9]*" inputmode="numeric" class="pwd1" tabindex="-1" maxlength="1" id="pwd2"></span><span><input type="number" pattern="[0-9]*" inputmode="numeric" class="pwd1" tabindex="-1" maxlength="1" id="pwd3"></span><span><input type="number" pattern="[0-9]*" inputmode="numeric" class="pwd1" tabindex="-1" maxlength="1" id="pwd4"></span><span><input type="number" pattern="[0-9]*" inputmode="numeric" class="pwd1" tabindex="-1" maxlength="1" id="pwd5"></span><span><input type="number" pattern="[0-9]*" inputmode="numeric" class="pwd1" tabindex="-1" maxlength="1" id="pwd6"></span></div>