D3Public/oxtotp
8
0
Fork 1
Code Pull Requests Releases Activity

handle delete keys in OTP input form

Browse Source
This commit is contained in:
Daniel Seifert 2022-11-24 09:36:39 +01:00
parent c5d9fea2fe
commit 331a05b080
Signed by: DanielS
GPG Key ID: 8A7C4C6ED1915C6F
2 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Application/views/admin/tpl/d3totplogin.tpl
View File

@ -34,24 +34,27 @@
<div class="container"> <div class="container">
<label for="1st">erste TOTP-Ziffer</label> <label for="1st">erste TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('2nd')" autofocus autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent(null, '2nd')" autofocus autocomplete="off">
<label for="2nd">zweite TOTP-Ziffer</label> <label for="2nd">zweite TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="2nd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('3rd')" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="2nd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('1st', '3rd')" autocomplete="off">
<label for="3rd">dritte TOTP-Ziffer</label> <label for="3rd">dritte TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="3rd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('4th')" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="3rd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('2nd', '4th')" autocomplete="off">
<label for="4th">vierte TOTP-Ziffer</label> <label for="4th">vierte TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="4th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('5th')" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="4th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('3rd', '5th')" autocomplete="off">
<label for="5th">fünfte TOTP-Ziffer</label> <label for="5th">fünfte TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="5th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('6th')" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="5th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('4th', '6th')" autocomplete="off">
<label for="6th">sechste TOTP-Ziffer</label> <label for="6th">sechste TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="6th" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="6th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('5th', null)" autocomplete="off">
</div> </div>
[{capture name="d3js"}] [{capture name="d3js"}]
function clickEvent(next){ function clickEvent(previous, next){
const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; const digitKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
if(digits.includes(event.key)){ const deleteKeys = ['Backspace', 'Delete'];
if(next && digitKeys.includes(event.key)){
document.getElementById(next).focus(); document.getElementById(next).focus();
} else if(previous && deleteKeys.includes(event.key)){
document.getElementById(previous).focus();
} }
} }
document.addEventListener("paste", function(e) { document.addEventListener("paste", function(e) {

21
src/Application/views/tpl/d3totplogin.tpl
View File

@ -25,24 +25,27 @@
<div class="container"> <div class="container">
<label for="1st">erste TOTP-Ziffer</label> <label for="1st">erste TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('2nd')" autofocus autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id='1st' inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent(null, '2nd')" autofocus autocomplete="off">
<label for="2nd">zweite TOTP-Ziffer</label> <label for="2nd">zweite TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="2nd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('3rd')" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="2nd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('1st', '3rd')" autocomplete="off">
<label for="3rd">dritte TOTP-Ziffer</label> <label for="3rd">dritte TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="3rd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('4th')" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="3rd" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('2nd', '4th')" autocomplete="off">
<label for="4th">vierte TOTP-Ziffer</label> <label for="4th">vierte TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="4th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('5th')" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="4th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('3rd', '5th')" autocomplete="off">
<label for="5th">fünfte TOTP-Ziffer</label> <label for="5th">fünfte TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="5th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('6th')" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="5th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('4th', '6th')" autocomplete="off">
<label for="6th">sechste TOTP-Ziffer</label> <label for="6th">sechste TOTP-Ziffer</label>
<input type="text" name="d3totp[]" class="digit" id="6th" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off"> <input type="text" name="d3totp[]" class="digit" id="6th" inputmode="numeric" pattern="[0-9]*" maxlength="1" onkeyup="clickEvent('5th', null)" autocomplete="off">
</div> </div>
[{capture name="d3js"}] [{capture name="d3js"}]
function clickEvent(next){ function clickEvent(previous, next){
const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; const digitKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
if(digits.includes(event.key)){ const deleteKeys = ['Backspace', 'Delete'];
if(next && digitKeys.includes(event.key)){
document.getElementById(next).focus(); document.getElementById(next).focus();
} else if(previous && deleteKeys.includes(event.key)){
document.getElementById(previous).focus();
} }
} }
document.addEventListener("paste", function(e) { document.addEventListener("paste", function(e) {