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

Question

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

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>

Answer 1

只需添加您的 CSS。direction: rtl;inputconst input = document.querySelector('input');const button = document.querySelector('button');button.addEventListener('click', function() {&nbsp; input.value += Math.floor(Math.random() * 10)});html, body {&nbsp; background: black;}input {&nbsp; width: 15rem;&nbsp; height: 3rem;&nbsp; margin: 2rem .4rem 2rem .4rem;&nbsp; font-size: 3rem;&nbsp; text-align: right;&nbsp; color: white;&nbsp; background-color: black;&nbsp; outline: none;&nbsp; transition: all .1s ease;&nbsp; direction: rtl;}<input type='text' readonly='true' value='0'><button>CLICK ME</button>更新根据您的最后一个链接 https://codepen.io/ssmkhrj/pen/ExPjJab您应该在代码中更改此设置<div class="display-cover">&nbsp; <div class="display"></div></div>&nbsp;&nbsp;和断续器.display-cover{&nbsp; width: 19.2rem;&nbsp; height: 3rem;&nbsp; margin: 0 .4rem 1.5rem .4rem;&nbsp; text-align: right;&nbsp; font-size: 3rem;&nbsp; white-space: nowrap;&nbsp; padding-bottom: 0.5rem;&nbsp; overflow-y: hidden;&nbsp; overflow-x: scroll;&nbsp; scroll-snap-type: x mandatory; /* this will do the magic for parent */}.display{&nbsp; height: 3rem;&nbsp; display: inline-block;&nbsp; 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() {&nbsp; // concatonate random number to input value&nbsp; input.value += Math.floor(Math.random() * 10)});setInterval(function(){&nbsp;input.focus();});html, body {&nbsp; background: black;}input {&nbsp; width: 15rem;&nbsp; height: 3rem;&nbsp; margin: 2rem .4rem 2rem .4rem;&nbsp; font-size: 3rem;&nbsp; text-align: right;&nbsp; color: white;&nbsp; background-color: black;&nbsp; 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() {&nbsp; // concatonate random number to input value&nbsp; input.value += Math.floor(Math.random() * 10)&nbsp; // focus input to scroll to end&nbsp; input.focus();});html, body {&nbsp; background: black;}input {&nbsp; width: 15rem;&nbsp; height: 3rem;&nbsp; margin: 2rem .4rem 2rem .4rem;&nbsp; font-size: 3rem;&nbsp; text-align: right;&nbsp; color: white;&nbsp; background-color: black;&nbsp; outline: none;}<input type='text' readonly='true' value='0' dir="rtl"><button>CLICK ME</button>