亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

onChange / onInput 替代品?

onChange / onInput 替代品?

一只名叫tom的貓 2022-07-08 15:48:59
我正在創建一個打字測試頁面并遇到一個小問題。我試圖在用戶鍵入時啟動計時器,并且使用 onInput 可以工作,但問題是每次我鍵入 textArea 時它都會注冊,這會導致 starttimer 函數重復自身。onChange 有效,但僅在我在頁面外部單擊后才有效,這很有意義,但不是我要尋找的。我需要在用戶開始打字后立即啟動計時器。也可以使用 onChange 停止功能,但在我點擊頁面外部后計時器開始。是否有適合我正在尋找的 JS 事件,或者有沒有辦法更改 onInput 或 onChange 來解決我遇到的問題。JavaScriptdocument.getElementById("test-area").onchange = function () {      startTimer(1);};謝謝你。
查看完整描述

4 回答

?
aluckdog

TA貢獻1847條經驗 獲得超7個贊

您需要收聽該input事件,因為正如您所說change,僅在輸入失去焦點后觸發,這不是您想要的。您還需要只處理一次事件。


document.getElementById("test-area").addEventListener("input", () => {

  startTimer(1);

}, {once: true});

請注意,這會在觸發事件處理程序后刪除它。如果您需要再次運行它,您將不得不再次注冊該事件。也許在您的計時器回調中。


查看完整回答
反對 回復 2022-07-08
?
慕的地10843

TA貢獻1785條經驗 獲得超8個贊

一些解決方案:


變體 1

只需創建一個標志:


var timerStarted = false; // Was the timer started?

document.getElementById("test-area").oninput = function () {

      if(timerStarted) return; // If timer was started - do nothing

      startTimer(1); // Else - start the timer

      timerStarted = true; // Remember what we've started the timer

};

變體 2

(有點短)


document.getElementById("test-area").addEventListener("input", function () {

      startTimer(1);

}, {once: true}); // Good thing about addEventListener

//                   With this it will run the event only single time

更多信息:https ://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener


查看完整回答
反對 回復 2022-07-08
?
哆啦的時光機

TA貢獻1779條經驗 獲得超6個贊

你試過 onfocus 嗎?它不完全是他們開始打字的時間,但它確實有效。另一種選擇是您使用 onInput 并在時鐘啟動功能上將布爾值 -isRunning - 更改為 true。然后放一個 if (isRunning) 返回。就像是:


function start() {

  if(isRunning) return;

  isRunning = true;

}

然后在停止 onChange 時將布爾值更改為 false


查看完整回答
反對 回復 2022-07-08
?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

可以用 JQuery 嗎?如果是這樣,它有一個方法 .one() 將只執行一次函數。然后您可以自由使用 keydown/keyup 事件處理程序。例如。


<script>

  $(document).ready(function(){

    $("#test-area").one("keydown", function() {

       alert("hey");

    });

  });

</script>


查看完整回答
反對 回復 2022-07-08
  • 4 回答
  • 0 關注
  • 204 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號