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

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用 JavaScript 獲取鼠標光標移動的焦點元素

使用 JavaScript 獲取鼠標光標移動的焦點元素

收到一只叮咚 2023-02-24 15:56:35
當我單擊任何塊時，它會添加一個新類.is-selected。當我通過單擊塊獲得焦點時，它工作正常。但是當我使用箭頭鍵將焦點放在另一個塊上時它不起作用。使用箭頭鍵時如何獲得焦點？let getBlocks = document.querySelectorAll(".block");getBlocks.forEach((single) => {  single.addEventListener("focus", () => {    //remove all activated class    getBlocks.forEach((x) => {      x.classList.remove("is-selected");    });        //add the class to this new focus block    single.classList.add("is-selected");  });});* {  box-sizing: border-box;}.root {  max-width: 600px;  margin: 1rem auto;}.root:focus,.block:focus {  outline: 0;}.is-selected {  background-color: #f4f8ff !important;  border: 1px solid #deebff !important;}<div class="root" contenteditable>  <p name="jYdi0" class="block" tabindex="0">1</p>  <p name="Hdy89" class="block" tabindex="0">2</p>  <p name="wEldk" class="block" tabindex="0">3</p></div>
查看完整描述

2 回答

?
胡子哥哥

TA貢獻1825條經(jīng)驗 獲得超6個贊

更新 ：


var ind = 0;


let getBlocks = document.querySelectorAll(".block");


function caretInfo(up = true) {

  let sel = window.getSelection();

  let offset = sel.focusOffset;

  if (up) {

    sel.modify("move", "backward", "character");

    if (offset == sel.focusOffset) return true;

    else {

      sel.modify("move", "forward", "character");

      return false;

    }

  } else {

    sel.modify("move", "forward", "character");

    if (offset == sel.focusOffset) return true;

    else {

      sel.modify("move", "backward", "character");

      return false;

    }

  }

}


function selection(item) {

  getBlocks.forEach((x, index) => {

    if (x === item) {

      ind = index;

    }

    x.classList.remove("is-selected");

  });


  //add the class to this new focus block

  item.classList.add("is-selected");


}


getBlocks.forEach((item) => {

  item.addEventListener('focus', () => {

    selection(item);

  });

});


document.addEventListener("keydown", function(event) {

  let change = false;

  if (event.keyCode == 38 || event.keyCode == 40) {

    if (event.keyCode == 38 && ind > 0) {

      change = caretInfo();

      if (change) {

        ind--;

      }

    } else if (event.keyCode == 40 && ind < document.querySelectorAll('.root p').length - 1) {

      change = caretInfo(false);

      if (change) {

        ind++;

      }

    }


    if (change) {

      let cur = document.querySelectorAll('.root p')[ind];

      cur.focus();

    }

  }

})

* {

  box-sizing: border-box;

}


.root {

  max-width: 600px;

  margin: 1rem auto;

}


.root:focus,

.block:focus {

  outline: 0;

}


.is-selected {

  background-color: #f4f8ff !important;

  border: 1px solid #deebff !important;

}

<div class="root">

  <p name="jYdi0" class="block" tabindex="0" contenteditable>1</p>

  <p name="Hdy89" class="block" tabindex="0" contenteditable>It was single line but now it's multiple line Just amazine what can be happen here. Here is the problem try to click "me" and then press arrow up. Ops :( but it should be on the first line</p>

  <p name="wEldk" class="block" tabindex="0" contenteditable>lorem ipsumlorem ipsumlorem ipsum3</p>

</div>


查看完整回答
反對 回復(fù) 2023-02-24
?
侃侃爾雅

TA貢獻1801條經(jīng)驗 獲得超16個贊

你也可以做類似的事情


   document.addEventListener("keypress", (event) => {

       if(event.which === someEventCode) {

         // your code here

       }

    })

在這里，someEventCode變量對于不同的按鍵是不同的。


查看完整回答
反對 回復(fù) 2023-02-24
  • 2 回答
  • 0 關(guān)注
  • 260 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

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

 公眾號

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