模擬在輸入文本上按[Enter]鍵

Question

我的代碼在頁面加載時自動改變輸入的值，並且在它之間有一個延遲，可以很好地工作。

但還有一個問題，當我試圖模擬輸入上按下[enter]鍵時，它沒有任何作用，它提交表單並重新加載我的頁面。

我如何模擬在輸入時按下[enter]鍵而不提交表單並且無需重新加載我的頁面？我用純javascript沒有jQuery

這是我的腳本：

var form \t = document.querySelectorAll("._k3t69"); 
 
var input \t = document.querySelectorAll("._7uiwk._qy55y"); 
 
var message = "Replacement..." ; 
 
var maxMsg = 3 ; 
 
var delay \t = 2.5 * 1000 ; // 2.5 Seconds 
 

 
var j = 0, k = 0; 
 
function setValue(){ 
 
    if(j == maxMsg || j == input.length) { 
 
    \t clearInterval(looping) 
 
    } else { 
 
\t \t input[j++].value = message ; 
 
    //And then simulate pressing enter key ON THE INPUT, not sumbit the form 
 
    form[k++].submit(); 
 
    } 
 
} 
 

 
var looping = setInterval(setValue, delay);

<form class="_k3t69"> 
 
    <input type="text" class="_7uiwk _qy55y"> 
 
</form> 
 

 
<form class="_k3t69"> 
 
    <input type="text" class="_7uiwk _qy55y"> 
 
</form> 
 

 
<form class="_k3t69"> 
 
    <input type="text" class="_7uiwk _qy55y"> 
 
</form>

Here's the fiddle

Answer 1

提交默認的形式將提交表單並重新加載頁。

如果要觸發按鍵事件：如果您要檢查，如果按下的鍵是進入

var input = document.querySelector("._7uiwk._qy55y"); 
var ev = document.createEvent('Event'); 
ev.initEvent('keypress'); 
ev.which = ev.keyCode = 13; 
input.dispatchEvent(ev); 

：

var input = document.querySelector("._7uiwk._qy55y"); 
input.addEventListener('keypress', function(ev){ 
    if(ev.keyCode === 13 || ev.which === 13){ 
    // enter was pressed 
    } 
}); 

如果你想阻止提交上輸入表單/提交：

var form = document.querySelector("._k3t69"); 

form.addEventListener('submit', function(ev){ 
    ev.preventDefault(); 
    // you can do something alternative here e.g. send AJAX request to server 

    return false; 
}); 

JSFIDDLE