Users: Make it easier to enter votes vouchers

Automatically switch fields and fill all fields on paste
This commit is contained in:
Maxim Leshchenko 2021-12-26 14:24:15 +02:00
parent 579b2fb0dd
commit 91429437f8
No known key found for this signature in database
GPG key ID: BB9C44A8733FBEEE
2 changed files with 47 additions and 5 deletions

View file

@ -348,16 +348,40 @@
{elseif $isFinanceTU} {elseif $isFinanceTU}
<p>{_voucher_explanation} {_voucher_explanation_ex}</p> <p>{_voucher_explanation} {_voucher_explanation_ex}</p>
<form action="/settings?act=finance.top-up" method="POST" enctype="multipart/form-data"> <form name="vouncher_form" action="/settings?act=finance.top-up" method="POST" enctype="multipart/form-data">
<input type="text" name="key0" size="6" placeholder="123456" required="required" style="display: inline-block; width: 50px; text-align: center;" /> - <input type="text" name="key0" class="vouncher_input" size="6" maxlength="6" placeholder="123456" required="required" oninput="autoTab(this, document.vouncher_form.key1, undefined)" style="display: inline-block; width: 50px; text-align: center;" /> -
<input type="text" name="key1" size="6" placeholder="789012" required="required" style="display: inline-block; width: 50px; text-align: center;" /> - <input type="text" name="key1" class="vouncher_input" size="6" maxlength="6" placeholder="789012" required="required" oninput="autoTab(this, document.vouncher_form.key2, document.vouncher_form.key0)" style="display: inline-block; width: 50px; text-align: center;" /> -
<input type="text" name="key2" size="6" placeholder="345678" required="required" style="display: inline-block; width: 50px; text-align: center;" /> - <input type="text" name="key2" class="vouncher_input" size="6" maxlength="6" placeholder="345678" required="required" oninput="autoTab(this, document.vouncher_form.key3, document.vouncher_form.key1)" style="display: inline-block; width: 50px; text-align: center;" /> -
<input type="text" name="key3" size="6" placeholder="90ABCD" required="required" style="display: inline-block; width: 50px; text-align: center;" /> <input type="text" name="key3" class="vouncher_input" size="6" maxlength="6" placeholder="90ABCD" required="required" oninput="autoTab(this, undefined, document.vouncher_form.key2)" style="display: inline-block; width: 50px; text-align: center;" />
<br/><br/> <br/><br/>
<input type="hidden" name="hash" value="{$csrfToken}" /> <input type="hidden" name="hash" value="{$csrfToken}" />
<input type="submit" value="{_redeem}" class="button" /> <input type="submit" value="{_redeem}" class="button" />
</form> </form>
<script>
u(".vouncher_input").on("paste", function(event) {
const vouncher = event.clipboardData.getData("text");
let segments;
if(vouncher.length === 27) {
segments = vouncher.split("-");
if(segments.length !== 4)
segments = undefined;
} else if(vouncher.length === 24) {
segments = chunkSubstr(vouncher, 6);
}
if(segments !== undefined) {
document.vouncher_form.key0.value = segments[0];
document.vouncher_form.key1.value = segments[1];
document.vouncher_form.key2.value = segments[2];
document.vouncher_form.key3.value = segments[3];
document.vouncher_form.key3.focus();
}
event.preventDefault();
});
</script>
{elseif $isInterface} {elseif $isInterface}

View file

@ -247,3 +247,21 @@ function showCoinsTransferDialog(coinsCount, hash) {
Function.noop Function.noop
]); ]);
} }
function chunkSubstr(string, size) {
const numChunks = Math.ceil(string.length / size);
const chunks = new Array(numChunks);
for (let i = 0, o = 0; i < numChunks; ++i, o += size) {
chunks[i] = string.substr(o, size);
}
return chunks;
}
function autoTab(original, next, previous) {
if(original.getAttribute && original.value.length == original.getAttribute("maxlength") && next !== undefined)
next.focus();
else if(original.value.length == 0 && previous !== undefined)
previous.focus();
}