Forum Discussion
Limiting Text Entry to One Character Issue
Try
const Inputs = () => { const inputs = document.querySelectorAll('.acc-textinput'); inputs.forEach((input) => { input.setAttribute('maxlength', '1'); input.setAttribute('autocomplete', 'off'); }); } setTimeout(Inputs, 100);
I have an advanced developer who is helping me to limit the characters.
He tried this and other suggestions but it only works for 1 entry box on a slide.
I have multiple slides with up to 3 entry boxes on each slide. Suggestions? Thanks
This code was very useful- thanks! - but I also found that it only restricted the first text field on the slide. By replacing the JavaScript arrow function with a traditional function, it now seems to limit all the text-fileds (although the uppercase transform does not work).
function LimitInputs() {
const inputs = document.querySelectorAll('.acc-textinput');
inputs.forEach(function(input) {
input.setAttribute('maxlength', '1');
input.setAttribute('autocomplete', 'off');
input.style.textTransform = 'uppercase';//doesn't work
});
}
setTimeout(LimitInputs, 100);
LimitInputs();
Try converting text to uppercase dynamically, with use of input event listener like this:
const inputs = document.querySelectorAll('.acc-textinput'); inputs.forEach(function(input) { input.setAttribute('maxlength', '10'); input.setAttribute('autocomplete', 'off'); input.addEventListener('input', function () { this.value = this.value.toUpperCase(); }); });The last typed character will initially appear lowercase. If you set maxlength to 1, the typed character will remain lowercase. This happens because the input event fires before the browser fully processes the character (IMO), and the next keystroke corrects it to uppercase. I can't seem to force it to uppercase before any event triggers.
