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

Question

我正在设计一个小型计算器应用程序，我尝试编写一个小而易于理解的不同代码来解释我的问题。
因此，当按下按钮时，它会生成随机数，然后进入输入框。 现在，一旦输入框overflows ，我已经设置了focus ，这样就可以看到输入框中的内容。 现在的问题是，观察溢出后，如果你按住按钮，焦点会回到左边，当你释放它时，焦点会回到右边，看起来很烦人，我只是想解决这个问题。 我希望我想说的很清楚。

 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'> <button>CLICK ME</button>

Answer 1

只需添加direction: rtl; 在您的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>

更新

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

这你应该在你的代码中改变

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

和 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 */
}

有关此scroll-snap更多信息，请参见 https://css-tricks.com/practical-css-scroll-snapping/

Answer 2

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

 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>

Answer 3

使用 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>