模拟在输入文本上按下[Enter]键

Question

我的代码在页面加载时成功地更改了输入的值，并且有延迟。

但是还有另一个问题，当我尝试模拟在输入框中按下[enter]键时，它不起作用，而是提交表单并重新加载我的页面。

如何在输入框中模拟按下[enter]键，而不提交表单并重新加载我的页面？ 我使用纯javascript而没有使用jQuery

这是我的脚本：

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

var j = 0, k = 0;
function setValue(){
  if( j == maxMsg || j == input.length) {
   clearInterval(looping)
  } else {
  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>

这是代码演示

- Engkus Kusnadi

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
  }
});

如果您想防止在按下Enter/提交时提交表单：

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

- LJ Wadowski

---

你能在 jsfiddle 或 sinippet 上放一个例子吗？ - Engkus Kusnadi

@EngkusKusnadi 只是想澄清一下，如果您不想提交表单，为什么要触发“keypress”回车事件？ - LJ Wadowski

仅供测试我的网站。 - Engkus Kusnadi

或者针对phantomJS :) - FlorianB