1

I have been trying to do this for several days now. I have read across tons of other similar questions, but nothing helped me yet. What I am trying to do is to simulate the exact event, like organic keypress to text input field that user can make. So, it would set the "value" of the input to new value, to work exactly like real keypress. It need to work on 1 browser at least, be it Chrome, Mozzila or IE, it totally does not matter. I need to type letter by letter in an input, but if it works for 1 letter, it will certainly work for couple of them.

Please note: It can't be setting the value of input. Only artificial keypress event can help me.

Nikola Pejic
  • 145
  • 1
  • 12

2 Answers2

1

You can use an application to interact with or control the browser. Using a library like http://www.seleniumhq.org/ can help.

Here's code to trigger a keypress event from Definitive way to trigger keypress events with jQuery

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
$("input").trigger(e);

Are you sure that setting the value wont work for you? What if you set the value to what it is plus the new char? A runnable example is included here.

function typeLetter( letter ) {
    $( '#input' ).val( $( '#input' ).val() + letter );
}

typeLetter( 'a' );
setTimeout( function() { typeLetter( 'b' ); }, 500 );
setTimeout( function() { typeLetter( 'c' ); }, 1000 );
setTimeout( function() { typeLetter( 'd' ); }, 1500 );
setTimeout( function() { typeLetter( 'e' ); }, 2000 );
setTimeout( function() { typeLetter( 'f' ); }, 2500 );
setTimeout( function() { typeLetter( 'g' ); }, 3000 );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" >
JasonB
  • 6,243
  • 2
  • 17
  • 27
  • Selenium's description "automates browsers" sounds exactly like what I need, thank you! But, value won't work, because input is bind somehow to a function from object and it is written in React.js. Keypress event fires, and with that a function that changes a property of an object is called, so it sets the value to the property. Script is very very complex (57k rows God know's why) and I can't manage to do anything with it, except "cheat" with artificial keypresses. – Nikola Pejic Jan 01 '18 at 20:05
  • Doesn't sound like fun. I'm adding another idea to this answer. – JasonB Jan 01 '18 at 20:20
0

Can add the value one character at a time and get the key code using charCodeAt() for each character to pass to a new event that you then trigger

let str = 'a new value';
$('input').on('keypress', function(e) {
  console.log(e.type + ', which=' + e.which)
})

str.split('').forEach((s, i) => {
  (function(s, i) {

    const evt = jQuery.Event("keypress");
    evt.which = str.charCodeAt(i);
    
    setTimeout(function() {
      jQuery('input').val(function(_, oVal) {
        return oVal + s;
      }).trigger(evt);
    }, 200 * i) //long delay for demo purpose

  })(s, i)

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>

Remove the val() call if needed and just trigger the event

charlietfl
  • 170,828
  • 13
  • 121
  • 150