-2
The problem is this.
I made a calculator and the result input this as readonly. To insert the number into it just by clicking on the buttons I made as shown in the following photo:
However, when arriving at the end of the input it does not follow the last character because it would only do so if the input was in focus (that is, if I was typing in it).
How can I make the input always follow the last character ?
Below is my project on Codepen.
2
I’ll give you a hint and an answer that might solve your problem.
90% of the calculators I know the alignment of the text is right. Do you know why? Because as the number grows you always know the last digit that was typed and can check the screen the last number that was entered.
So avoid changing the default behavior of already known objects. You can read about Affordance here https://brasil.uxdesign.cc/affordance-o-%C3%B3bvio-do-%C3%B3bvio-e91761f4403b
Affordance English term, not currently translated in Portuguese, but which, in this context, could be easily translated by "acknowledging" or "opportunity"
Source: https://pt.wikipedia.org/wiki/Affordance
So, even for the sake of Euristics, it would be interesting to keep the alignment right, which is the way most users are used to and which corresponds more faithfully to the calculators "real".
Euristicas de Nielsen
This is the Google calculator
This is the one from Windows
And that of Android
Basically in your input you should put a text-align: right
<input type="text" style="text-align:right" placeholder="digite aqui">
<br>
<br>
<input type="text" style="text-align:right" readonly value="texto a direita 0">I hadn’t paid attention and thought about it, I was so focused on making that happen that I didn’t even think about changing the alignment to the right. Thank you very much.
@Johncovv without problems my dear! Although it was simple to solve, there is a whole "why" to use the alignment there. Good luck in the project ai []s
Browser other questions tagged javascript html5 css3 input
You are not signed in. Login or sign up in order to post.
Without your code you can only answer on kick, post at least one Codepen or Jsfiddle so we can test
– hugocsl
You would have to concatenate the value you already have in the input + the number clicked. But it’s good to see your code because there are different ways to do this.
– Sam
@hugocsl I edited my post, that was my js code that I used to keep adding the typed numbers. (I’m a beginner, so I did it in the most basic way, I don’t know if there’s a better way).
– John Covv
John, I think it would be nice if you put the entire code, including CSS and HTML in addition to JS, because without CSS and HTML you can’t simulate your calculator. In last vc tb can post your code in a Codepen or Jsfiddle and post the link here.
– hugocsl
@hugocsl Upei no codepen, the link is at the end of the post, I accept any correction.
– John Covv
Face it seems that when the input text is larger than the input width it happens a by default one align the text to the left at Blur time, even though the input is initially aligned to the right... So when the input text exceeds its width and you click outside the field it does not align the text "correctly".... Look at this gif https://imgur.com/Qbi3l8D look at what happens after I fill and click out, it puts the text at the beginning....
– hugocsl
The alignment is only on the right if the input is focused. I’m searching how to fix this.
– John Covv
@hugocsl Ready, I was able to change using the "Direction" attribute of css, and added msm to ":not(:Focus)".
– John Covv
Very good John, nice balcony!
– hugocsl