I have this code to make a tooltip appear when attempting to exceed the maxlength in my inputbox.
It however flashes on mobile, but works correctly on pc.
One problem it also could have is that the input in the inputbox is limited by maxlength in another part of the script. So input.value.length cannot really be > maxLength.
Does someone know a fix?
let timeout;
document.getElementById(‘your-label’).addEventListener(‘keydown’, function(event) {
const input = this;
const maxLength = input.getAttribute(‘maxlength’);
const tooltip = document.querySelector(‘.tooltip’);
const tooltipText = tooltip ? tooltip.querySelector(‘.tooltiptext’) : null;
// If the tooltip elements are found
if (tooltip && tooltipText) {
// Check if the length exceeds maxlength after the keydown
if (input.value.length + 1 > maxLength) {
tooltip.classList.add(‘active’);
clearTimeout(timeout); // Clear any existing timeout
timeout = setTimeout(function() {
tooltipText.style.opacity = ‘0’; // Fade out gradually
setTimeout(function() {
tooltip.classList.remove(‘active’);
tooltipText.style.opacity = ‘1’; // Reset opacity
}, 300); // Remove ‘active’ class after the fade-out transition completes
}, 2000); // Fade out after 2 seconds of inactivity
}
}
});
// Handling the input event to keep the tooltip visible when the maxlength is exceeded
document.getElementById(‘your-label’).addEventListener(‘input’, function(event) {
const input = this;
const maxLength = input.getAttribute(‘maxlength’);
const tooltip = document.querySelector(‘.tooltip’);
const tooltipText = tooltip ? tooltip.querySelector(‘.tooltiptext’) : null;
// If the tooltip elements are found
if (tooltip && tooltipText) {
// If the input value exceeds maxlength, keep the tooltip active
if (input.value.length > maxLength) {
tooltip.classList.add(‘active’);
} else {
clearTimeout(timeout); // Clear the timeout if user types within the limit
tooltip.classList.remove(‘active’);
tooltipText.style.opacity = ‘1’; // Reset opacity
}
}
});