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

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