javascript bookmark script for filling text boxes not working for React page?

user_825920 0
Viewed 49

I created a bookmark on my Chrome browser with the following javascript code. So I don't need to type username/password for the login web pages.

javascript:(()=>{
    let f=(s,v)=>document.querySelector(`[id$="${s}"],[name$="${s}"],[type$="${s}"]`).value=v;
    f('password','....');
    f('username','...')
})()

It works on most of our login pages. However, on one of the login pages created with React, the username and password text boxes (html input) do fill in, but the value is not submitted when clicking the login button. Unless I make some editing in the username and password text box (e.g., by adding a space and then delete it).

Is it a way to avoid manually editing the text boxes? (it seems the script needs to trigger some events like keyup?)

HTML input:

<input autocomplete="off" id="username" disabled="" class="login-input input" type="text" value="">

enter image description here

Tried the following code and it still behaves the same.

javascript:(()=>{
    let f=(s,v)=>{
        x=document.querySelector([id$="${s}"],[name$="${s}"],[type$="${s}"]);
        x.value=v;
        x.dispatchEvent(new Event("change", {target: {value: v}}))
    };
    f('password','....');f('username','....')
})()
reactjs javascript
1 Answers

Generally, in react, there are 2 ways to get the value of what is in the input and use it in the app.

  1. Uncontrolled components where they use ref and just check ref which should be automatically updated when value changes.
  2. Controlled components, where they hold the value in state, and they set the state on an onChange event like so:
const [val, setVal] = useState("") // initial value of empty string
return <input value={val} onChange={(e) => setVal(e.target.value)} />

If the code is setup like the second case, we may need to simulate an onChange event ourselves in order for the state to update.

We can try modifying the script like so:

javascript:(()=>{
    let f=(s,v)=>document.querySelector(`[id$="${s}"],[name$="${s}"],[type$="${s}"]`).dispatchEvent(new Event("change", {target: {value: v}}))
    f('password','....');
    f('username','...')
})()
user_131996350
Related