Simulate sending data to the text input field with JS

Question

I have a task where I need to automate Sign in form authentication. For this example, I'll show you Tiktok authentication form (Mobile interface, not desktop. E-mail and password option)

form screenshot with inactive login button

If I enter text values into the fields programmatically, the Login button won't become active, and if I manually focus on the fields with a mouse click, the value disappears. These are two lines of code I run to put the value in:

let email_input = document.getElementsByName("email")[0];
email_input.value = '[email protected]';

I understand it needs to trigger a certain event to assign a value into it's JS model, but I can't figure out how to do it. I have tried sending change or input events onto this text field with no luck using this code:

let email_input = document.getElementsByName("email");
email_input[0].value = '[email protected]';

custom_event = new Event('input');
email_input[0].dispatchEvent(custom_event);

// tried also change, textInput like so:
custom_event = new Event('change');
email_input[0].dispatchEvent(custom_event);

But this does not seem to help. So my goal is to put values into both fields Email and Password in the way it will be detected and Log in button would become active.

Any suggestion would be much appreciated

Does this answer your question? Pure Javascript listen to input value change — goto
– goto, Commented Aug 17, 2020 at 10:41
no, since this would require a change to be made on Tiktok side in this case. My goal is to set values of both fields as on 3rd party website, so its values would be detected and Login button would become active. — Yuriy P.
– Yuriy P., Commented Aug 17, 2020 at 10:53
Can you try email_input[0].dispatchEvent(new Event('input', { bubbles: true })); — Liju
– Liju, Commented Aug 17, 2020 at 11:09
I found the solution - injecting this function helped me: function changeValue(input,value){ var nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(input, value) var inputEvent = new Event("input", { bubbles: true }); input.dispatchEvent(inputEvent); } — Yuriy P.
– Yuriy P., Commented Aug 17, 2020 at 14:46

Eugene Mala · Accepted Answer · 2022-07-12 00:57:08Z

24

You should first focus needed input element and then execute document.execCommand with insertText command:

let email_input = document.getElementsByName("email");
email_input[0].focus();
document.execCommand('insertText', false, '[email protected]');

With this method input\textarea value modification should be captured by all major frameworks including Angular and Vuejs. This modification will be processed by frameworks the same way as if user pressed "Paste" option in browser main menu.

edited Jul 12, 2022 at 0:57

answered Jul 11, 2022 at 7:18

Eugene Mala

1,32313 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yvon Over a year ago

If you want to type in escaped characters like &#nbsp then use insertHTML

blueway Over a year ago

Man, you're an absolute legend saved my day :)

user4723924 · Accepted Answer · 2020-08-17 11:11:31Z

0

It all depends...

Who/what are you? A normal browser user? A bot? The browser author?

Because code like this is useless...

let email_input = document.getElementsByName("email")[0];

What document are you referring to? Who's document? Did you inject this instruction into the page and executed it?

You're not telling us where you're coming from, but anyway...

If you are the browser author, or you can run JavaScript macros from your browser (ie: the Classic browser) then you can do something like this...

var Z=W.contentWindow.document.querySelectorAll('input[type="password"]');

 if(Z.length>0){ 

   Z[0].value='password123';

   Z=W.contentWindow.document.querySelectorAll('input[type="email"]');

   if(Z.length>0){Z[0].value='[email protected]';}
 }

To automatically populate such fields, and if you also want you can SubmitButtonID.click() the submit button for as long as the isTrusted property is not tested by the website.

answered Aug 17, 2020 at 11:11

user4723924

11 bronze badge

2 Comments

Yuriy P. Over a year ago

Thank you for your answer. I'm injecting Javascript as a browser author. Running this code will populate input values, however, this will only set input values. For example, after running this code Log in button remains inactive, as the page did not get the appropriate event that the values were actually entered. My goal is to reach the same behavior as if I would enter the values manually using keyboard.

user4723924 Over a year ago

See my new post here.

user4723924 · Accepted Answer · 2020-08-17 12:17:55Z

0

Continued...

Test if normal (non-custom) submit button exists and click...

  Z=W.contentWindow.document.querySelectorAll('input[type="submit"]');

  if(Z.length>0){

   if(Z[0].hasAttribute('disabled')){Z[0].removeAttribute('disabled');}  <--- Enable it if disabled

   Z[0].click(); <--- automate click

  }

edited Aug 17, 2020 at 12:17

answered Aug 17, 2020 at 12:01

user4723924

11 bronze badge

2 Comments

Yuriy P. Over a year ago

The button will become clickable, but will throw an error that no email or password is present. You can see it the form here tiktok.com/login/phone-or-email/email?lang=en (mobile view) . Not sure if it's written on React or Vue, but it does not take the value directly from the input field, instead, the value is saved to a variable when you type. So setting the value programmatically using elm.value="value"; does not help.

user4723924 Over a year ago

Well then you need to research further to understand EXACTLY how it works to tackle the problem, although I wonder if “Tik-tok” is worth the trouble... :)

Collectives™ on Stack Overflow

Simulate sending data to the text input field with JS

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related