I am working on a project for journalising registrations on teeth but encountered a problem.
In the start of the registration I have made toggle buttons, for registering if the tooth is present in the mouth or not. After this comes a series of input type=text elements connected to the giving tooth, these can only receive 1 digit input, before having a focus() function shift the cursor to the next input form.
However, I need the input forms to disappear and be inaccessible for the user, and on the same time make the cursor jump to the next accessible input element, without having the user clicking or pressing anything.
I was thinking of having the toggle button insert specific value into the input forms, and then make a function which makes the cursor skip boxes with the giving value.
// Script for removing tooth object
function TS_8p() {
var t = document.getElementById("Tooth_present");
t.classList.toggle("no_molar_OK");
}
// script for setting specific value into input
function no_PD_CAL(val) {
document.getElementById('2').value = val;
}
// script for making cursor automove inbetween inputs
function jump(field, automove) {
if (field.value.length >= field.maxLength) {
document.getElementById(automove).focus();
}
};
function jump_inaccessible() {
if (field.value = "¤") {
document.getElementById(automove).focus();
}
}<button type="button" class="molar" id="Tooth_present" onclick="TS_8p();no_PD_CAL(this.value)" value="¤"> tooth </button>
<input type="text" id="1" class="PD_CAL_box text-center" maxlength="1" onkeyup="jump(this, '2')" />
<input type="text" id="2" class="PD_CAL_box text-center" maxlength="1" onkeyup="jump(this, '3'); jump_inaccessible(this, '4')" />
<input type="text" id="3" class="PD_CAL_box text-center" maxlength="1" onkeyup="jump(this, '4')" />