web-dev-qa-db-ja.com

入力テキストで[Enter]キーを押すことをシミュレートします

私のコードは完全に機能し、ページの読み込み時に入力の値を自動で変更しましたが、その間に遅延がありました。

しかし、別の問題があります。入力で[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>

これがフィドルです

javascripthtmlinputkeypress
6
Engkus Kusnadi

デフォルトでフォームを送信すると、フォームが送信され、ページが再読み込みされます。

キー押下イベントをトリガーする場合：

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 [〜＃〜]

10
LJ Wadowski