anon
anon

Reputation:

How to stop the focus of input element from jumping back and forth?

When the button is pressed it generates random numbers, that goes into the input box. Now, once the input box overflows, I have set the focus, so that it is visible what is going into the input box. Now the problem is, observe after there's overflow, if you keep the button pressed the focus comes back to left and when you release it, the focus goes back to right, which looks very disturbing, I just want to fix that. I hope what I am trying to say is clear.

const input = document.querySelector('input');
const button = document.querySelector('button');

button.addEventListener('click', function() {
  // concatenate random number to input value
  input.value += Math.floor(Math.random() * 10)
  // focus input to scroll to end
  input.focus();
});
input {
  width: 5rem;
}
<input type='text' readonly='true' value='0'>
<button>Click</button>

Upvotes: 1

Views: 2197

Answers (3)

focus.style
focus.style

Reputation: 6760

Simply add direction: rtl; in your input CSS.

const input = document.querySelector('input');
const button = document.querySelector('button');

button.addEventListener('click', function() {
  input.value += Math.floor(Math.random() * 10)
});
html, body {
  background: black;
}

input {
  width: 15rem;
	height: 3rem;
	margin: 2rem .4rem 2rem .4rem;
	font-size: 3rem;
  text-align: right;
  color: white;
  background-color: black;
  outline: none;
  transition: all .1s ease;
  direction: rtl;
}
<input type='text' readonly='true' value='0'>
<button>CLICK ME</button>

UPDATED

According to your last link https://codepen.io/ssmkhrj/pen/ExPjJab

This you should change in your code

<div class="display-cover">
  <div class="display"></div>
</div>  

and CSS

.display-cover{
  width: 19.2rem;
  height: 3rem;
  margin: 0 .4rem 1.5rem .4rem;
  text-align: right;
  font-size: 3rem;
  white-space: nowrap;
  padding-bottom: 0.5rem;
  overflow-y: hidden;
  overflow-x: scroll;
  scroll-snap-type: x mandatory; /* this will do the magic for parent */
}


.display{
  height: 3rem;
  display: inline-block;
  scroll-snap-align: end; /* this will do the magic for child */
}

More about this scroll-snap here https://css-tricks.com/practical-css-scroll-snapping/

Upvotes: 1

Xenvi
Xenvi

Reputation: 887

Using setInterval makes the input stay focused so it doesn't jump back and forth. It still is a little buggy though when you click outside of the input or button elements, but this gets the job done for the jumping.

const input = document.querySelector('input');
const button = document.querySelector('button');

button.addEventListener('click', function() {
  // concatonate random number to input value
  input.value += Math.floor(Math.random() * 10)
});

setInterval(function(){
 input.focus();
});
html, body {
  background: black;
}

input {
  width: 15rem;
	height: 3rem;
	margin: 2rem .4rem 2rem .4rem;
	font-size: 3rem;
  text-align: right;
  color: white;
  background-color: black;
  outline: none;
}
<input type='text' readonly='true' value='0' onfocus="this.value = this.value;" autofocus>
<button>CLICK ME</button>

Upvotes: 0

Vaibhav
Vaibhav

Reputation: 1473

Add dir="rtl" attribute to input field, it will flow text from right to left. W3Schools

const input = document.querySelector('input');
const button = document.querySelector('button');

button.addEventListener('click', function() {
  // concatonate random number to input value
  input.value += Math.floor(Math.random() * 10)
  // focus input to scroll to end
  input.focus();
});
html, body {
  background: black;
}

input {
  width: 15rem;
	height: 3rem;
	margin: 2rem .4rem 2rem .4rem;
	font-size: 3rem;
  text-align: right;
  color: white;
  background-color: black;
  outline: none;
}
<input type='text' readonly='true' value='0' dir="rtl">
<button>CLICK ME</button>

Upvotes: 0

Related Questions