How to make input type number only clickable on arrows?

Question

i have this input :

<input id="fraisent" name="fraisent" value="#= tauxAcquisEntree #" max="4" class="form-control text-center /*arrow-modify*/" min="1" type="number" step=1 pattern="[0-9]$" autocomplete="off" onkeydown="return false" />

It's already only modifiable by arrows.I want to go further and make it only clickable on the arrows, meaning making the part of the input where the number is displayed unclickable by mouse, only the arrows are clickable by mouse.

thanks but i already have " onkeydown="return false" " in my input — Youssef Boudaya, Jun 30 '23 at 16:12
I love how you kill usability for those of us that avoid using a mouse. — epascarello, Jun 30 '23 at 16:28
Here is another option, a custom input. Just use type text and onfocus="this.blur();" and change any reference from number to text too https://codepen.io/komarovdesign/pen/PPRbgb — imvain2, Jun 30 '23 at 16:30
Seems like a better option would be to implement your own read only input with two buttons that you can focus to increase and decrease. — epascarello, Jun 30 '23 at 16:33

score 0 · Answer 1 · answered Jun 30 '23 at 16:31

0

Again this is killing accessibility for people who don't use a mouse, but you can kill the focus of the input.

<input id="fraisent" name="fraisent" value="#= tauxAcquisEntree #" max="4" class="form-control text-center /*arrow-modify*/" min="1" type="number" step=1 pattern="[0-9]$" autocomplete="off" onkeydown="return false" onfocus="this.blur()" />

answered Jun 30 '23 at 16:31

epascarello

204,599
20
195
236

for this specific situation that's exactly what i want , your solution helped me but not 100% , i want only the arrows to be clickable howerver for part that contains the number i want to act like it's disabled without having the whole input disabled – Youssef Boudaya Jun 30 '23 at 16:40
In chrome clicking does not do anything unless you click on the arrows. Duplicate has a lot of answers so look at those to see if they are better. Still not sure why you are not just building your own control at this point. – epascarello Jun 30 '23 at 16:42

How to make input type number only clickable on arrows?

1 Answers1