프로그래밍 방식으로 주요 프레스 이벤트를 시뮬레이션 할 수 있습니까?

JavaScript로 키 프레스 이벤트를 프로그래밍 방식으로 시뮬레이션 할 수 있습니까?

웹킷과 도마뱀 모두에서 작동하는 비 jquery 버전 :

var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

keyboardEvent[initMethod](
  "keydown", // event type: keydown, keyup, keypress
  true,      // bubbles
  true,      // cancelable
  window,    // view: should be window
  false,     // ctrlKey
  false,     // altKey
  false,     // shiftKey
  false,     // metaKey
  40,        // keyCode: unsigned long - the virtual key code, else 0
  0          // charCode: unsigned long - the Unicode character associated with the depressed key, else 0
);
document.dispatchEvent(keyboardEvent);

jQuery 1.3.1을 사용해도 괜찮다면 :

function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}

$(function() {
  $('body').keypress(function(e) {
    alert(e.which);
  });

  simulateKeyPress("e");
});

당신이 할 수있는 것은 트리거 프로그램이다 의 KeyEvent 청취자를 발사하여 한 KeyEvents를 . 샌드 박스 보안 관점에서이를 허용하는 것이 합리적입니다. 이 기능을 사용하여 일반적인 옵저버 패턴 을 적용 할 수 있습니다 . 이 방법을 "시뮬레이션"이라고 부를 수 있습니다.

아래는 jQuery와 함께 W3C DOM 표준에서이를 수행하는 방법의 예입니다.

function triggerClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.querySelector('input[type=submit][name=btnK]'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // preventDefault was called and the event cancelled
  } else {
    // insert your event-logic here...
  }
}

이 예제는 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events 에서 수정되었습니다.

jQuery에서 :

jQuery('input[type=submit][name=btnK]')
  .trigger({
    type: 'keypress',
    which: character.charCodeAt(0 /*the key to trigger*/)      
   });

그러나 최근에는 브라우저-샌드 박스를 떠나는 키 이벤트를 실제로 트리거 할 수있는 [DOM] 방법이 없습니다. 그리고 모든 주요 브라우저 공급 업체는이 보안 개념을 준수합니다.

NPAPI 기반의 Adobe Flash와 같은 플러그인은 샌드 박스를 우회 할 수 있습니다 . Firefox .

상해:

Pekka가 이미 지적했듯이 보안상의 이유로 할 수 없으며 그렇게해서는 안됩니다. 당신은 항상 사이에 사용자 상호 작용이 필요합니다. 또한 다양한 프로그램 키보드 이벤트로 인해 스푸핑 공격이 발생하여 브라우저 공급 업체가 사용자에게 고소 당할 가능성을 상상하십시오.

대안 및 자세한 내용 은이 게시물 을 참조하십시오. 항상 플래시 기반 복사하여 붙여 넣기가 있습니다. 여기 우아한 예가 있습니다. 동시에 웹이 플러그인 공급 업체로부터 멀어지고있는 이유는 증거입니다.

옵트 인 CORS 정책 의 경우 원격 컨텐츠에 프로그래밍 방식으로 액세스 하는 경우에도 유사한 보안 사고 방식이 적용됩니다 .

정답은 다음과 같습니다 .
정상적인 상황에서는 샌드 박스 브라우저 환경에서 프로그래밍 방식으로 입력 키를 트리거 할 수있는 방법이 없습니다 .

결론 : 미래의 게임 또는 최종 사용자 경험에 대한 특별한 브라우저 모드 및 / 또는 특권으로 인해 그것이 불가능할 것이라고는 말하지 않습니다. 그러나 이러한 모드로 들어가기 전에 사용자는 Fullscreen API 모델 과 유사한 권한 및 위험을 묻습니다 .

유용한 : 키 코드의 맥락에서, 이 도구와 키 코드 매핑이 유용합니다.

공개 : 답변은 여기 에있는 답변을 기반으로합니다 .

이와 같은 요소에서 키보드 이벤트를 전달할 수 있습니다

element.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

당신은 사용할 수 있습니다 dispatchEvent():

function simulateKeyPress() {
  var evt = document.createEvent("KeyboardEvent");
  evt.initKeyboardEvent("keypress", true, true, window,
                    0, 0, 0, 0,
                    0, "e".charCodeAt(0))
  var body = document.body;
  var canceled = !body.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

나는 이것을 테스트하지 않았지만 dispatchEvent () documentation 의 코드에서 조정되었습니다 . 아마 그 내용과 createEvent () 및 initKeyEvent ()에 대한 문서를 읽고 싶을 것입니다.

키보드 이벤트를 생성하고 전달할 수 있으며 등록 된 적절한 이벤트 핸들러를 트리거하지만 입력 요소로 전달되는 경우 text를 생성하지 않습니다 .

텍스트 입력을 완전히 시뮬레이션하려면 일련의 키보드 이벤트를 생성하고 입력 요소의 텍스트를 명시 적으로 설정해야합니다. 이벤트 순서는 텍스트 입력을 얼마나 철저하게 시뮬레이트할지에 따라 다릅니다.

가장 간단한 형태는 다음과 같습니다.

$('input').val('123');
$('input').change();

경우에 따라 keypress이벤트가 필요한 기능을 제공하지 못할 수도 있습니다. mozilla 문서 에서 해당 기능이 더 이상 사용되지 않음을 알 수 있습니다.

이 기능은 더 이상 권장되지 않습니다. 일부 브라우저는 여전히이 브라우저를 지원할 수 있지만 관련 웹 표준에서 이미 제거되었거나 삭제 중이거나 호환성을 위해서만 유지 될 수 있습니다. 사용하지 말고 가능한 경우 기존 코드를 업데이트하십시오. 결정을 안내하려면이 페이지 하단의 호환성 표를 참조하십시오. 이 기능은 언제든지 작동하지 않을 수 있습니다.

따라서 keypress이벤트는 결과적으로 발생하는 두 개의 이벤트에서 결합되고 동일한 키에 대해 keydown다음 keyup이벤트가 발생하므로 이벤트를 하나씩 생성하십시오.

element.dispatchEvent(new KeyboardEvent('keydown',{'key':'Shift'}));
element.dispatchEvent(new KeyboardEvent('keyup',{'key':'Shift'}));

alex2k8의 답변을 바탕으로 jQuery가 지원하는 모든 브라우저에서 작동하는 수정 된 버전이 있습니다 (문제는 jQuery.event.trigger에 대한 인수가 누락되어 내부 함수를 사용할 때 잊을 수 없음).

// jQuery plugin. Called on a jQuery object, not directly.
jQuery.fn.simulateKeyPress = function (character) {
  // Internally calls jQuery.event.trigger with arguments (Event, data, elem).
  // That last argument, 'elem', is very important!
  jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });
};

jQuery(function ($) {
  // Bind event handler
  $('body').keypress(function (e) {
    alert(String.fromCharCode(e.which));
    console.log(e);
  });
  // Simulate the key press
  $('body').simulateKeyPress('x');
});

이것을 더 밀고 이벤트를 시뮬레이션 할뿐만 아니라 실제로 문자를 입력 할 수 있습니다 (입력 요소 인 경우). 그러나 그렇게하려고 할 때 많은 브라우저 간 문제가 있습니다. SendKeys 와 같은보다 정교한 플러그인을 사용하는 것이 좋습니다.

관심있는 사람들은 실제로 키보드 입력 이벤트를 안정적으로 다시 만들 수 있습니다. 입력 영역에서 텍스트를 변경하려면 (커서 또는 입력 문자를 통해 페이지 이동) DOM 이벤트 모델을 밀접하게 따라야합니다. http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events- 입력 이벤트

모델은 다음을 수행해야합니다.

• 포커스 (대상 세트와 함께 DOM에 배포 됨)

그런 다음 각 캐릭터에 대해

• 키 다운 (DOM에서 디스패치)
• beforeinput (텍스트 영역 또는 입력 인 경우 대상에서 배포 됨)
• 키 누르기 (DOM에서 제공)
• 입력 (텍스트 영역 또는 입력 인 경우 대상에서 발송 됨)
• 변경 (선택한 경우 대상에 배포)
• 키업 (DOM에 제공)

그런 다음 선택적으로 대부분을 위해 :

• 흐림 (대상 세트와 함께 DOM에 배포 됨)

이것은 실제로 값 문장을 수정하지 않고 자바 스크립트를 통해 페이지의 텍스트를 변경하고 자바 스크립트 리스너 / 핸들러를 적절하게 설정합니다. 시퀀스를 엉망으로 만들면 자바 스크립트가 적절한 순서로 실행되지 않고 입력 상자의 텍스트가 변경되지 않거나 선택 사항이 변경되지 않거나 커서가 텍스트 영역의 다음 공간으로 이동하지 않습니다.

불행히도 코드는 NDA 하에서 고용주를 위해 작성되었으므로 공유 할 수는 없지만 가능하지만 각 요소에 대한 전체 키 입력 "스택"을 올바른 순서로 다시 작성해야합니다.

2019 년 현재이 솔루션은 저에게 효과적이었습니다.

document.dispatchEvent(
  new KeyboardEvent("keydown", {
    key: "e",
    keyCode: 69, // example values.
    code: "KeyE", // put everything you need in this object.
    which: 69,
    shiftKey: false, // you don't need to include values
    ctrlKey: false,  // if you aren't going to use them.
    metaKey: false   // these are here for example's sake.
  })
);

시뮬레이션 된 키패드로 모바일 장치를 지원하기 위해 브라우저 게임에서 이것을 사용했습니다.

설명 : 이 코드는 단일 keydown이벤트를 전달 하지만 실제 키를 누르면 하나의 keydown이벤트 (또는 더 길게 유지되는 경우 여러 이벤트)를 트리거 한 다음 keyup해당 키 를 놓으면 하나의 이벤트 가 트리거 됩니다. keyup이벤트도 필요한 경우 코드 스 니펫에서 keyup로 변경 "keydown"하여 이벤트 를 시뮬레이션 할 수도 있습니다 "keyup".

또한 이벤트를 전체 웹 페이지로 전송하므로 document. 특정 요소 만 이벤트를 수신하도록 document하려면 원하는 요소를 대체 할 수 있습니다 .

이 접근 방식은 브라우저의 키 코드 값 변경을 지원 합니다 . 출처

var $textBox = $("#myTextBox");

var press = jQuery.Event("keypress");
press.altGraphKey = false;
press.altKey = false;
press.bubbles = true;
press.cancelBubble = false;
press.cancelable = true;
press.charCode = 13;
press.clipboardData = undefined;
press.ctrlKey = false;
press.currentTarget = $textBox[0];
press.defaultPrevented = false;
press.detail = 0;
press.eventPhase = 2;
press.keyCode = 13;
press.keyIdentifier = "";
press.keyLocation = 0;
press.layerX = 0;
press.layerY = 0;
press.metaKey = false;
press.pageX = 0;
press.pageY = 0;
press.returnValue = true;
press.shiftKey = false;
press.srcElement = $textBox[0];
press.target = $textBox[0];
press.type = "keypress";
press.view = Window;
press.which = 13;

$textBox.trigger(press);

그냥 CustomEvent를 사용하십시오

Node.prototype.fire=function(type,options){
     var event=new CustomEvent(type);
     for(var p in options){
         event[p]=options[p];
     }
     this.dispatchEvent(event);
}

4 전 Ctrl + Z를 시뮬레이트하고 싶습니다

window.addEventListener("keyup",function(ev){
     if(ev.ctrlKey && ev.keyCode === 90) console.log(ev); // or do smth
     })

 document.fire("keyup",{ctrlKey:true,keyCode:90,bubbles:true})

실제로 도움이되는 라이브러리는 다음과 같습니다. https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

어디서 왔는지 모르겠지만 도움이됩니다. 그것은 추가 .simulate()로 방법을 window.KeyEvent간단히와 함께 사용할 수 있도록, KeyEvent.simulate(0, 13)을 시뮬레이션 enter또는 KeyEvent.simulate(81, 81)A에 대한 'Q'.

https://github.com/ccampbell/mousetrap/tree/master/tests 에서 얻었습니다 .

이것은 나를 위해 일했고 내 textaera의 키 업을 시뮬레이트합니다. 당신은 전체 페이지를 원하는 경우 단지를 넣어 KeySimulation()에 <body>이 같은 <body onmousemove="KeySimulation()">아닌지 onmousemove후 onmouseover또는 onload작품도.

<script>
function KeySimulation()
{
var e = document.createEvent("KeyboardEvent");
if (e.initKeyboardEvent) {  // Chrome, IE
    e.initKeyboardEvent("keyup", true, true, document.defaultView, "Enter", 0, "", false, "");
} else { // FireFox
    e.initKeyEvent("keyup", true, true, document.defaultView, false, false, false, false, 13, 0);
}
document.getElementById("MyTextArea").dispatchEvent(e);
}
</script>

<input type="button" onclick="KeySimulation();" value=" Key Simulation " />
<textarea id="MyTextArea" rows="15" cols="30"></textarea>

콘솔 컨텍스트에서 사용하기 쉽기 때문에 한 번만 행했습니다. 그러나 아마도 여전히 유용합니다.

    var pressthiskey = "q"/* <-- q for example */;
    var e = new Event("keydown");
    e.key = pressthiskey;
    e.keyCode = e.key.charCodeAt(0);
    e.which = e.keyCode;
    e.altKey = false;
    e.ctrlKey = true;
    e.shiftKey = false;
    e.metaKey = false;
    e.bubbles = true;
    document.dispatchEvent(e);

다음은 Chrome 및 Chromium에서 작동하는 솔루션입니다 (이러한 플랫폼 만 테스트했습니다). Chrome에 키 코드 처리에 대한 버그 나 자체 접근 방식이 있으므로이 속성을 KeyboardEvent에 별도로 추가해야합니다.

function simulateKeydown (keycode,isCtrl,isAlt,isShift){
    var e = new KeyboardEvent( "keydown", { bubbles:true, cancelable:true, char:String.fromCharCode(keycode), key:String.fromCharCode(keycode), shiftKey:isShift, ctrlKey:isCtrl, altKey:isAlt } );
    Object.defineProperty(e, 'keyCode', {get : function() { return this.keyCodeVal; } });     
    e.keyCodeVal = keycode;
    document.dispatchEvent(e);
}

이것이 내가 찾은 것입니다.

function createKeyboardEvent(name, key, altKey, ctrlKey, shiftKey, metaKey, bubbles) {
  var e = new Event(name)
  e.key = key
  e.keyCode = e.key.charCodeAt(0)
  e.which = e.keyCode
  e.altKey = altKey
  e.ctrlKey = ctrlKey
  e.shiftKey = shiftKey
  e.metaKey =  metaKey
  e.bubbles = bubbles
  return e
}

var name = 'keydown'
var key = 'a'

var event = createKeyboardEvent(name, key, false, false, false, false, true)

document.addEventListener(name, () => {})
document.dispatchEvent(event)

TypeScript가 지원되는 기본 JavaScript 솔루션 :

keyCode 또는 사용중인 특성을 입력하고 KeyboardEventInit에 캐스트하십시오.

예

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);

그것이 크롬에서 js / typescript로 시도한 것입니다. 영감에 대한 이 답변 덕분에 .

const x = document.querySelector('input');

const keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
Object.defineProperty(keyboardEvent, "charCode", {
  get() {
    return 13;
  },
});
x.dispatchEvent(keyboardEvent);

사용자가 문제의 키를 누르 자마자 그 참조를 저장하고 다른 HTML 요소에서 사용할 수 있습니다.

EnterKeyPressToEmulate<input class="lineEditInput" id="addr333_1" type="text" style="width:60%;right:0%;float:right" onkeydown="keyPressRecorder(event)"></input>
TypeHereToEmulateKeyPress<input class="lineEditInput" id="addr333_2" type="text" style="width:60%;right:0%;float:right" onkeydown="triggerKeyPressOnNextSiblingFromWithinKeyPress(event)">
Itappears Here Too<input class="lineEditInput" id="addr333_3" type="text" style="width:60%;right:0%;float:right;" onkeydown="keyPressHandler(event)">
<script>
var gZeroEvent;
function keyPressRecorder(e)
{
  gZeroEvent = e;
}
function triggerKeyPressOnNextSiblingFromWithinKeyPress(TTT)
{
  if(typeof(gZeroEvent) != 'undefined')  {
TTT.currentTarget.nextElementSibling.dispatchEvent(gZeroEvent);
keyPressHandler(TTT);
  }
}
function keyPressHandler(TTT)
{
  if(typeof(gZeroEvent) != 'undefined')  {
TTT.currentTarget.value+= gZeroEvent.key;
event.preventDefault();
event.stopPropagation();
  }
}
</script>

자신의 이벤트를 생성하면 keyCode를 설정할 수 있습니다. dispatchEvent 작업 이후 대상을 무시하고 실제 키보드 이벤트에서 기존 매개 변수를 복사 할 수 있습니다.

ta = new KeyboardEvent('keypress',{ctrlKey:true,key:'Escape'})

질문에 키 누르기를 시뮬레이션하는 자바 스크립트 방법이 필요하다는 것을 알고 있습니다. 그러나 jQuery를 사용하는 사람들을 위해 :

var e = jQuery.Event("keypress");
e.which = 13 //or e.keyCode = 13 that simulates an <ENTER>
$("#element_id").trigger(e); 

일이 점점의 중요한 부분은 그것을 실현하는 것입니다 charCode, keyCode그리고 which하는 모든 방법을 사용되지 . 따라서 키 누름 이벤트를 처리 하는 코드 가이 세 가지 중 하나를 사용하는 경우 가짜 응답을받습니다 (예 : 기본값 0).

와 같이 사용되지 않는 방법으로 키 누르기 이벤트에 액세스하는 한 key괜찮습니다.

완료를 위해 이벤트를 트리거하기위한 기본 Javascript 코드를 추가했습니다.

const rightArrowKey = 39
const event = new KeyboardEvent('keydown',{'key':rightArrowKey})
document.dispatchEvent(event)

'Tab'프레스를 시뮬레이트하고 싶었습니다 ... Trevor의 답변을 확장하면 'tab'과 같은 특수 키가 눌려졌지만 'tab'프레스의 실제 결과는 보이지 않습니다. .

글로벌 문서 객체뿐만 아니라 'activeElement'에 대한 이러한 이벤트를 전달하려고 시도했습니다.

아래 스 니펫 :

var element = document.getElementById("firstInput");

document.addEventListener("keydown", function(event) {

  console.log('we got key:', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);

  /* enter is pressed */
  if (event.keyCode == 13) {
    console.log('enter pressed:', event);

    setTimeout(function() {
      /*  event.keyCode = 13;  event.target.value += 'b';  */

      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
    }, 4);

    setTimeout(function() {
      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
    }, 100);



  } else if (event.keyCode != 0) {
    console.log('we got a non-enter press...: :', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);
  }

});

<h2>convert each enter to a tab in JavaScript... check console for output</h2>
<h3>we dispatchEvents on the activeElement... and the global element as well</h3>

<input type='text' id='firstInput' />
<input type='text' id='secondInput' />

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
    Click me to display Date and Time.</button>
<p id="demo"></p>