Có thể mô phỏng các sự kiện báo chí chính theo chương trình?

Có thể mô phỏng các sự kiện nhấn phím theo chương trình bằng JavaScript không?

Một phiên bản không phải là jquery hoạt động trong cả webkit và tắc kè:

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

Nếu bạn ổn, hãy sử dụng 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");
});

Những gì bạn có thể làm là lập trình kích hoạt những người nghe quan trọng bằng cách bắn những người quan trọng . Nó có ý nghĩa để cho phép điều này từ quan điểm bảo mật hộp cát. Sử dụng khả năng này, sau đó bạn có thể áp dụng mô hình quan sát điển hình . Bạn có thể gọi phương pháp này là "mô phỏng".

Dưới đây là một ví dụ về cách thực hiện điều này trong tiêu chuẩn W3C DOM cùng với jQuery:

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...
  }
}

Ví dụ này được điều chỉnh từ: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Trong jQuery:

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

Nhưng gần đây, không có cách nào [DOM] để thực sự kích hoạt các khóa chính rời khỏi hộp cát trình duyệt. Và tất cả các nhà cung cấp trình duyệt lớn sẽ tuân thủ khái niệm bảo mật đó.

Đối với các plugin như Adobe Flash - dựa trên NPAPI- và cho phép bỏ qua hộp cát: đây là các loại bỏ dần ; Firefox .

Giải thích chi tiết:

Bạn không thể và bạn không được vì lý do bảo mật (như Pekka đã chỉ ra). Bạn sẽ luôn yêu cầu một người dùng tương tác ở giữa. Ngoài ra, hãy tưởng tượng cơ hội các nhà cung cấp trình duyệt bị người dùng kiện, vì các sự kiện bàn phím lập trình khác nhau sẽ dẫn đến các cuộc tấn công giả mạo.

Xem bài đăng này để thay thế và biết thêm chi tiết. Luôn luôn có flash và sao chép dựa trên flash. Dưới đây là một ví dụ thanh lịch . Đồng thời nó là một bằng chứng tại sao web di chuyển ra khỏi các nhà cung cấp plugin.

Có một tư duy bảo mật tương tự được áp dụng trong trường hợp chính sách CORS chọn tham gia để truy cập nội dung từ xa theo chương trình.

Câu trả lời là:
Không có cách nào để kích hoạt các khóa đầu vào theo chương trình trong môi trường trình duyệt hộp cát trong các trường hợp thông thường .

Tóm lại: Tôi không nói rằng nó sẽ không thể thực hiện được trong tương lai, dưới các chế độ và / hoặc đặc quyền trình duyệt đặc biệt hướng tới mục tiêu cuối cùng của trò chơi hoặc trải nghiệm người dùng tương tự. Tuy nhiên, trước khi vào các chế độ như vậy, người dùng sẽ được yêu cầu quyền và rủi ro, tương tự như mô hình API toàn màn hình .

Hữu ích: Trong bối cảnh của mã phím, này công cụ và keycode bản đồ sẽ có ích.

Tiết lộ: Câu trả lời dựa trên câu trả lời ở đây .

Bạn có thể gửi các sự kiện bàn phím trên một yếu tố như thế này

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

Bạn có thể sử dụng 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");
  }
}

Tôi đã không kiểm tra điều này, nhưng nó được điều chỉnh từ mã trên tài liệu của ClarkEvent () . Có lẽ bạn sẽ muốn đọc qua điều đó, và cả các tài liệu cho createdEvent () và initKeyEvent ().

Bạn có thể tạo và gửi các sự kiện bàn phím và chúng sẽ kích hoạt các trình xử lý sự kiện đã đăng ký thích hợp, tuy nhiên chúng sẽ không tạo ra bất kỳ văn bản nào , nếu được gửi đến phần tử đầu vào chẳng hạn.

Để mô phỏng đầy đủ kiểu nhập văn bản, bạn cần tạo một chuỗi các sự kiện bàn phím cộng với việc đặt rõ ràng văn bản của phần tử đầu vào. Chuỗi sự kiện phụ thuộc vào mức độ bạn muốn mô phỏng nhập văn bản.

Hình thức đơn giản nhất sẽ là:

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

Trong một số trường hợp, keypresssự kiện không thể cung cấp chức năng yêu cầu. Từ các tài liệu mozilla chúng ta có thể thấy rằng tính năng này không được dùng nữa:

Tính năng này không còn được khuyến khích. Mặc dù một số trình duyệt vẫn có thể hỗ trợ nó, nhưng nó có thể đã bị xóa khỏi các tiêu chuẩn web có liên quan, có thể đang trong quá trình bị loại bỏ hoặc chỉ có thể được giữ cho mục đích tương thích. Tránh sử dụng nó và cập nhật mã hiện có nếu có thể; xem bảng tương thích ở dưới cùng của trang này để hướng dẫn quyết định của bạn. Hãy lưu ý rằng tính năng này có thể ngừng hoạt động bất cứ lúc nào.

Vì vậy, vì keypresssự kiện được kết hợp từ hai sự kiện được kích hoạt keydownvà sau đó là sự kiện keyupcho cùng một khóa, chỉ cần tạo từng sự kiện một:

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

Dựa trên câu trả lời từ alex2k8, đây là phiên bản sửa đổi hoạt động trong tất cả các trình duyệt mà jQuery hỗ trợ (vấn đề là thiếu các đối số với jQuery.event.trigger, rất dễ quên khi sử dụng chức năng nội bộ đó).

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

Bạn thậm chí có thể đẩy nó đi xa hơn và để nó không chỉ mô phỏng sự kiện mà còn thực sự chèn ký tự (nếu đó là một yếu tố đầu vào), tuy nhiên có nhiều gotcha trình duyệt chéo khi cố gắng làm điều đó. Sử dụng tốt hơn một plugin phức tạp hơn như SendKeys .

Kể từ năm 2019, giải pháp này đã có hiệu quả với tôi:

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

Tôi đã sử dụng điều này trong trò chơi trình duyệt của mình, để hỗ trợ các thiết bị di động có bàn phím mô phỏng.

Làm rõ: Mã này gửi một keydownsự kiện duy nhất , trong khi một phím bấm thực sự sẽ kích hoạt một keydownsự kiện (hoặc một vài trong số chúng nếu nó được giữ lâu hơn), và sau đó là một keyupsự kiện khi bạn phát hành phím đó. Nếu bạn cũng cần keyupcác sự kiện, cũng có thể mô phỏng keyupcác sự kiện bằng cách thay đổi "keydown"thành"keyup" đoạn mã.

Điều này cũng gửi sự kiện đến toàn bộ trang web, do đó document. Nếu bạn chỉ muốn một yếu tố cụ thể để nhận sự kiện, bạn có thể thay thế documentcho yếu tố mong muốn.

Đối với những người quan tâm, trên thực tế, bạn có thể tạo lại các sự kiện đầu vào bàn phím một cách đáng tin cậy. Để thay đổi văn bản trong khu vực đầu vào (di chuyển con trỏ hoặc trang thông qua ký tự đầu vào), bạn phải theo sát mô hình sự kiện DOM: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

Mô hình nên làm:

• tiêu điểm (được gửi trên DOM với bộ mục tiêu)

Sau đó, cho mỗi nhân vật:

• keydown (được gửi trên DOM)
• beforeinput (được gửi tại mục tiêu nếu đó là textarea hoặc đầu vào)
• nhấn phím (được gửi trên DOM)
• đầu vào (được gửi tại mục tiêu nếu đó là một vùng văn bản hoặc đầu vào)
• thay đổi (được gửi tại mục tiêu nếu nó được chọn)
• keyup (được gửi trên DOM)

Sau đó, tùy chọn cho hầu hết:

• làm mờ (được gửi trên DOM với bộ mục tiêu)

Điều này thực sự thay đổi văn bản trong trang thông qua javascript (không sửa đổi các câu lệnh giá trị) và đặt ra bất kỳ trình nghe / xử lý javascript nào một cách thích hợp. Nếu bạn làm rối trình tự javascript sẽ không kích hoạt theo thứ tự phù hợp, văn bản trong hộp nhập sẽ không thay đổi, các lựa chọn sẽ không thay đổi hoặc con trỏ sẽ không di chuyển đến không gian tiếp theo trong vùng văn bản.

Thật không may, mã được viết cho một chủ nhân theo NDA vì vậy tôi không thể chia sẻ nó, nhưng chắc chắn là có thể nhưng bạn phải tạo lại toàn bộ "ngăn xếp" đầu vào cho mỗi phần tử theo đúng thứ tự.

Cách tiếp cận này hỗ trợ trình duyệt chéo thay đổi giá trị của mã khóa . Nguồn

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

chỉ cần sử dụng 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 ex muốn mô phỏng 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})

Đây là một thư viện thực sự hữu ích: https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

Tôi không biết nó đến từ đâu, nhưng nó rất hữu ích. Nó thêm một .simulate()phương thức vào window.KeyEvent, vì vậy bạn sử dụng nó đơn giản chỉ KeyEvent.simulate(0, 13)để mô phỏng một enterhoặc KeyEvent.simulate(81, 81)cho a 'Q'.

Tôi đã nhận nó tại https://github.com/ccampbell/mousetrap/tree/master/tests .

Điều này làm việc cho tôi và nó mô phỏng một keyup cho textaera của tôi. nếu bạn muốn nó cho toàn bộ trang chỉ đưa KeySimulation()vào <body>như thế này <body onmousemove="KeySimulation()">hoặc nếu không onmousemovethì onmouseoverhoặc onloadcông trình quá.

<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>

Nó được chèo một lần duy nhất do sử dụng dễ dàng trong bối cảnh giao diện điều khiển. Nhưng có lẽ vẫn hữu ích.

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

Đây là một giải pháp hoạt động trong Chrome và Chromium (chỉ mới thử nghiệm các nền tảng này). Có vẻ như Chrome có một số lỗi hoặc cách tiếp cận riêng để xử lý mã khóa, do đó, thuộc tính này phải được thêm riêng vào Bàn phím.

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

Đây là những gì tôi quản lý để tìm:

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)

JavaScript gốc với giải pháp được hỗ trợ TypeScript:

Nhập keyCode hoặc bất kỳ thuộc tính nào bạn đang sử dụng và chuyển nó vào KeyboardEventInit

Thí dụ

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

Đó là những gì tôi đã thử với js / typecript trong chrome. Nhờ câu trả lời này cho cảm hứng.

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

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

ngay khi người dùng nhấn phím trong câu hỏi, bạn có thể lưu trữ một tham chiếu đến đó và sử dụng nó trên bất kỳ phần tử HTML nào khác:

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>

bạn có thể đặt keyCode nếu bạn tạo sự kiện của riêng mình, bạn có thể sao chép các tham số hiện có từ bất kỳ sự kiện bàn phím thực nào (bỏ qua các mục tiêu kể từ khi công việc của ClarkEvent) và:

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

Tôi biết câu hỏi yêu cầu một cách mô phỏng javascript để nhấn phím. Nhưng đối với những người đang tìm kiếm một cách làm jQuery:

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

Phần quan trọng của việc làm điều này là để nhận ra điều đó charCode, keyCodevà tất cảwhich đều là những phương pháp không dùng nữa . Do đó, nếu mã xử lý sự kiện nhấn phím sử dụng bất kỳ một trong ba điều này, thì nó sẽ nhận được câu trả lời không có thật (ví dụ: mặc định là 0).

Miễn là bạn truy cập vào sự kiện nhấn phím bằng phương pháp không phản đối, chẳng hạn như key, bạn sẽ ổn.

Để hoàn thành, tôi đã thêm mã Javascript cơ bản để kích hoạt sự kiện:

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

Tôi muốn mô phỏng nhấn 'Tab' ... Mở rộng câu trả lời của Trevor, chúng ta có thể thấy rằng một phím đặc biệt như 'tab' sẽ bị nhấn nhưng chúng ta không thấy kết quả thực tế mà báo chí 'tab' sẽ có .. .

đã cố gắng gửi các sự kiện này cho 'activeEuity' cũng như đối tượng tài liệu toàn cầu cả hai - mã cho cả hai được thêm vào bên dưới;

đoạn trích dưới đây:

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>