为什么我不能在其中输入文字<input>带有 javascript 代码的字段？ 文字闪回原值

Question

Watch the video to see what I mean exactly https://youtu.be/kvdVNwTjw5c Thank you!

I'm trying to automate login this website shopee.sg/buyer/login I need to input the login name first but I couldn't do it with my codes, it always changed back to original value after the code is executed. I have used codes document.getElementsByClassName("_56AraZ")[0].value = "my username"; or document.getElementsByClassName('_56AraZ')[0].setAttribute('value',"my username"); the text in the field appeared on screen to be changed but then the text flashed back to the previous value after I clicked to other field or clicked somewhere else, it didn't really change. I know this code can be successfully on other websites but this website is tricky for me? Can anyone help me to input text to this field successfuly? Thank you!

Answer 1

Probably something else also tries to write in that field - it may be other script or the browser (saved form data). I suggest you delayed your script with a setTimeout function for some absurd time (like 2 seconds or more) and if it helps, lower the delay to a working, but acceptable value. so your script is the last thing that writes to that field. And/or you can try running it on window.load event.

Answer 2

If I run this from the console, it works: document.getElementsByClassName("_56AraZ")[0].value = "my username";

So probably you run your code before the input is even created. Let's check it. Inside the setTimeout callback, insert this:

const field = document.querySelector("._56AraZ");
if (field) {
    field.value = "my username";
} else {
    alert('No input field!');
}

This should let you know if you try to fill the field too early. If this is the case, you'll have to know somehow when the input field is being created and run your code after it happens. How to do it exactly - I can't tell you as I know nothing about your site's architecture.