第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何阻止輸入元素的焦點(diǎn)來(lái)回跳躍？

如何阻止輸入元素的焦點(diǎn)來(lái)回跳躍？

交互式愛(ài)情 2022-09-23 14:54:10
按下按鈕時(shí)，它會(huì)生成隨機(jī)數(shù)，該隨機(jī)數(shù)將進(jìn)入輸入框。現(xiàn)在，一旦輸入框，我已經(jīng)設(shè)置了，以便可以看到輸入框中的內(nèi)容?，F(xiàn)在的問(wèn)題是，觀(guān)察溢出后，如果你按住按鈕，焦點(diǎn)會(huì)回到左邊，當(dāng)你釋放它時(shí)，焦點(diǎn)會(huì)回到右邊，這看起來(lái)很令人不安，我只是想解決這個(gè)問(wèn)題。我希望我想說(shuō)的是清楚的。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>
查看完整描述

3 回答

?
犯罪嫌疑人X

TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊

只需添加您的 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>

更新


根據(jù)您的最后一個(gè)鏈接 https://codepen.io/ssmkhrj/pen/ExPjJab


您應(yīng)該在代碼中更改此設(shè)置


<div class="display-cover">

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

</div>  

和斷續(xù)器


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

}

更多關(guān)于這里的信息 在這里 https://css-tricks.com/practical-css-scroll-snapping/scroll-snap


查看完整回答
反對(duì) 回復(fù) 2022-09-23
?
largeQ

TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個(gè)贊

使用 setInterval 會(huì)使輸入保持專(zhuān)注，因此它不會(huì)來(lái)回跳轉(zhuǎn)。雖然當(dāng)你在輸入或按鈕元素之外單擊時(shí)，它仍然有點(diǎn)錯(cuò)誤，但這可以完成跳躍的工作。


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>


查看完整回答
反對(duì) 回復(fù) 2022-09-23
?
月關(guān)寶盒

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊

將屬性添加到輸入字段，它將從右向左流動(dòng)文本。W3學(xué)校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>


查看完整回答
反對(duì) 回復(fù) 2022-09-23
  • 3 回答
  • 0 關(guān)注
  • 139 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)