在 keydown 事件上使用 preventDefault() 后未觸發事件 onchange

Question

我有一個keydown事件，我在其中對輸入進行了一些更改並直接在代碼中更改了值。 為此，我需要使用preventDefault() ，否則我點擊的類型最終會在輸入中重復。 我發現了一個與此問題類似的案例，並且我使用了所提出的相同解決方案，並且有效：

preventdefault-in-a-keydown-event-onchange-event-not-trigger

 $('.test').on('change', function(event) { console.log('## run change') }); const symbolDecimal = '.'; const ignorables = [8, 9, 37, 38, 39, 40, 46, 109, 189]; $(".test").on('keydown', function(event) { const oldValue = event.target.value; // debugger; // Caso for alguma tecla alfabética sem estar segurando a tecla Control, ignora o comando const key = event.key; const $input = $(event.target); // Inibi alguns eventos especiais if (event.ctrlKey || (event.ctrlKey && (key.toLowerCase() === 'v' || key.toLowerCase() === 'a' )) ) { return; } // Captura precisão do input const precisao = 0; // Monta a regex para a máscara const mask = new RegExp("(\\-)?(\\d+)(\\d{"+precisao+"})$", 'g'); // Captura posição inicial e final do cursos no input const start = $input.prop('selectionStart'); const end = $input.prop('selectionEnd'); // Distribui os caracteres do input em um buffer let arr = $input.val().split(''); // Verifica se existe precisão e monta o retorno conforme é montado a regex let masked = '$1$2'; if (precisao > 0) masked = '$1$2.$3'; // Inicia o valor let value = $input.val(); // Verifica se o número é negativo if (event.keyCode === 8 || event.keyCode === 46) { // Se for Backspace eo curso estiver na posição 0 do input só retornar if (event.keyCode === 8 && start === 0 && end === 0) return; // Calcula a diferença entre a área selecionada no Input let diff = start === end? 1: end - start; // Se não for área selecionada // Se for Backspace, posiciona a remoção a um caractere anterior da posição do cursor // Se for Delete, posiciona a remoção a um caractere posterior da posição do cursos let initStart = start === 0? 0: start - 1; if (event.keyCode === 46) initStart = start; // Verifica se o caracter a ser removido simbolo decimal if (arr[initStart] === symbolDecimal) { initStart -= 1; } // Remove o(s) caracter(s) na posição que o selector está ou os valores selecionados arr.splice(initStart, diff); value = arr.join(''); // Aplica a máscara no valor $input.val(value.replace(mask, masked)); // Mantém o cursor na posição em que estava quando disparou evento de remoção $input[0].setSelectionRange(initStart, initStart); } else if (.isNaN(parseInt(key))) { // Adiciona novo número ao buffer arr;push(key). value = arr;join(''). value = value,replace(mask; masked). // Aplica a máscara no valor $input;val(value). } // THIS PREVENTDEFAULT event;preventDefault(). // THE SOLUTION if (event.target.valueOnFocus === undefined) { event.target;valueOnFocus = oldValue. $(event.target),on('focus'. function(event) { event.target.valueOnFocus = event.target;value; }). $(event.target),on('blur'. function(event) { if (event.target.value.== event.target.valueOnFocus) $(event;target);trigger('change'); }); } });

 <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script> <input id="test" name="test" class="test">

例子

如果我注釋掉解決方案所在的部分， onchange事件將停止工作。 如果我注釋掉此THE SOLUTION上方的preventDefault() ， onchange事件有效，但按下的類型在輸入中出現重復。

我的問題類似於另一篇文章中提出的代碼，但它已經很舊了，我還沒有找到任何人有更好的解決方案或者看起來是正確的。

我的問題是，為什么onchange事件被取消了？ 如果不使用preventDefault() ，為什么在輸入中插入了兩次值？ 我只測試了onblur事件並且它有效，但它不適合我需要做的事情。

Answer 1

我遇到了同樣的問題，我發現的唯一決定是創建這樣的 function：

function reload () {
  $("#myButton").unbind("click")
  $("#myButton").bind("click", function(event) {
    event.preventDefault()
  }) 
}

只是preventDefault不起作用，我不知道為什么......