Как установить onkeypress или onkeydown только одним кликом? - PullRequest
Новая
       33

Как установить onkeypress или onkeydown только одним кликом?

0 голосов
/ 03 февраля 2020

Я пытаюсь использовать onkeypress или onkeydown один раз после нажатия, после чего onkeypress удалит, но я не могу этого сделать, и попытался, но не работал, что я пытался.

вот мой фрагмент ниже. 

textarea.onkeypress = myPress;

    function myPress(){
        let setTime = setInterval(timeUpdate, 1000);
        function timeUpdate(){
            time.innerHTML =Number(time.innerHTML)+1;
        }
    }
<div id="time">0</div>
    <textarea  name="" id="textarea" cols="30" rows="10"></textarea>

Согласно моему фрагменту, когда я печатаю, onkeypress выглядит как несколько нажатий, и setInterval ведет себя так, как будто время не идет каждые 1 секунду, поэтому мне нужно поставить каждую секунду, когда я печатаю внутри textarea. Спасибо.

Ответы [ 3 ]

1 голос
/ 03 февраля 2020

Вам нужно удалить событие после установки интервала. 

textarea.onkeypress = myPress;

    function myPress(){
        let setTime = setInterval(timeUpdate, 1000);
        textarea.onkeypress = null;
        function timeUpdate(){
            time.innerHTML =Number(time.innerHTML)+1;
        }
    }
<div id="time">0</div>
    <textarea  name="" id="textarea" cols="30" rows="10"></textarea>
1 голос
/ 03 февраля 2020

Вы должны добавить и удалить прослушиватели событий. В данный момент он срабатывает при каждом нажатии клавиши, а не только над первым. Примерно так: 

function myPress() {
    textarea.removeEventListener('keypress', myPress, false);
    // Do something else here
}

const textarea = document.getElementById('textarea');
textarea.addEventListener('keypress', myPress, false);

Существует полный список addEventListener для MDN, который должен помочь более подробно объяснить, как его использовать: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

1 голос
/ 03 февраля 2020

Вам необходимо следить за предыдущим запущенным событием. Альтернативой может быть переменная вне обработчика или data attribute (aka dataset in js) в элементе, который является своего рода флагом. 

document.querySelector("#textarea").addEventListener("keypress", function() {
  if (time.dataset.time === "-1") {
    time.dataset.time = "1";
    setInterval(function() {
      time.innerHTML = Number(time.textContent) + 1; //Using textContent we access the text without any applied style to the element.
    }, 1000);
  }
});
<div id="time" data-time="-1">0</div>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>

Если обработчик не будет использоваться в будущем, вы можете удалить событие . 

let handler = function() {
    setInterval(function() {
      time.innerHTML = Number(time.textContent) + 1; //Using textContent we access the text without any applied style to the element.
    }, 1000);
    
    this.removeEventListener("keypress", handler);
};

let textarea = document.querySelector("#textarea");
textarea.addEventListener("keypress", handler);
<div id="time" data-time="-1">0</div>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>
...