We have closed this ticket because another page addresses its subject:
The "inputType": "number" subtracts a value on losing focusI found out that when scrolling with a mouse over a focused numeric input, the window does the scroll and also the numeric value changes. In my opinion, this is some a bit annoying more than a "feature".
Did you know this? Should i prevent this behavior, how could i do it, or will this be planned to be fixed on a future release?
Hi Jose,
SurveyJS Forms use the standard <input type="number"> HTML element to render numeric entry fields. By default, scrolling over a numeric input field with the mouse wheel changes its value, incrementing or decrementing based on the step attribute (which defaults to 1 if not specified). This behavior aligns with the HTML5 specification.
If you'd like to disable this scrolling effect, you can use the survey.onAfterRenderQuestion function to add an event listener that prevents scrolling on numeric inputs. Consider the following code:
JavaScript survey.onAfterRenderQuestion.add((sender, options) => {
if(!!options.question.inputType && options.question.inputType === "number"){
const numericInput = options.htmlElement.getElementsByTagName("input")[0];
numericInput.addEventListener('wheel', function(event) {
numericInput.blur();
});
}
})
With this approach, if a user scrolls the mouse wheel over a focused numeric input field, the input will lose focus, allowing the page to scroll instead.
Let me know if you have any questions.
I understand, thanks!
How can i use the code provided to avoid scrolling on the preview tab in survey creator?
You can obtain a previewed survey as described at Preview Mode Survey Instance and attach the survey.onAfterRenderQuestion function to a previewed survey.
Let me know if you require further assistance.