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);
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
The code above will work regardless of whether there is one or more text entry fields. However, if you're facing issues and need further troubleshooting, it might be helpful to share your code file so someone can inspect it.
Thanks Nedim!
Hi Nedim,
We're stuck. The goal is to have multiple text entry fields on a single slide With a real-time counter.
Hi LesB,
Would you mind moving this to a new topic, such as 'Multiple Text Entry Fields with a Real-time Counter'? This way, others looking for a similar solution can find it more easily and avoid confusion. This thread has become a bit unclear, as the codes shared are for different scenarios and not directly related to the original inquiry. I’ll post a new solution and update the code for you shortly.
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.
