为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

交互式爱情 2022-09-23 14:54:10

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


查看完整描述

3 回答

?
犯罪嫌疑人X

TA贡献1750条经验 获得超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


查看完整回答
反对 回复 2022-09-23
?
largeQ

TA贡献1712条经验 获得超7个赞

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


查看完整回答
反对 回复 2022-09-23
?
月关宝盒

TA贡献1470条经验 获得超4个赞

将属性添加到输入字段,它将从右向左流动文本。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>


查看完整回答
反对 回复 2022-09-23
  • 3 回答
  • 0 关注
  • 12 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信