如何阻止输入元素的焦点来回跳跃？

Question

按下按钮时，它会生成随机数，该随机数将进入输入框。现在，一旦输入框，我已经设置了，以便可以看到输入框中的内容。现在的问题是，观察溢出后，如果你按住按钮，焦点会回到左边，当你释放它时，焦点会回到右边，这看起来很令人不安，我只是想解决这个问题。我希望我想说的是清楚的。overflowsfocusconst 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>

Answer 1

只需添加您的 CSS。direction: rtl;input

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>

更新

根据您的最后一个链接 https://codepen.io/ssmkhrj/pen/ExPjJab

您应该在代码中更改此设置

<div class="display-cover">

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

</div>  

和断续器

.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 */

}

更多关于这里的信息 在这里 https://css-tricks.com/practical-css-scroll-snapping/scroll-snap

Answer 2

使用 setInterval 会使输入保持专注，因此它不会来回跳转。虽然当你在输入或按钮元素之外单击时，它仍然有点错误，但这可以完成跳跃的工作。

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>

Answer 3

将属性添加到输入字段，它将从右向左流动文本。W3学校dir="rtl"

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>