1

I am implementing a form filling algorithm and encountered a problem when setting the inputs' values on certain websites. For example, on the Netflix payment form the values that are set dynamically overlap the inner label and all values suddenly disappear once an input is clicked.

form filling overlap

Here is a snippet of the form filling code:

$(elem).val(data.firstName);
$(elem).blur();

I have tried to focus on the element before setting the value and played around with the inspect tool but all I discovered is that the value attribute will simply reset if set on Dev Tools. I may be wrong but could the input only save the value if typed exclusively on a keyboard?

EDIT

If you wish to reproduce the issue, simply go to the Netflix page and follow the steps to sign up for a paid membership until you reach the payment form by credit card. Go to the inspect tool and click on any on the input elements in the DOM (not on the page but in the dev tools panel). Once selected, type on the console $0.value = "test"; $0.blur() and press enter. This will reproduce the issue.

Note: $0 refers to the element you last clicked on in the Elements panel in DevTools. I also wish to clarify that this issue has happened on multiple websites and not only on Netflix.

Noam Suissa
  • 428
  • 4
  • 23
  • sounds like placeholders are not real placeholders – epascarello Sep 16 '19 at 14:55
  • Are you able to provide a minimal reproduction of your issue? It will be easier to help if we can reproduce your problem. Are you using the placeholder attribute or any front-end frameworks (other than jQuery)? – Tom Faltesek Sep 16 '19 at 14:55
  • @epascarello The placeholders are actually labels and get moved up once the user clicks on the input. The real issue here is that the values are not staying when they are set dynamically. – Noam Suissa Sep 16 '19 at 15:06
  • 1
    Focus the element and use document.execCommand, [example](/a/57900849). – wOxxOm Sep 16 '19 at 15:10
  • setting a value directly with JavaScript fires no events to the textbox so whatever code that is attached that updates the labels is not triggered. So you probably need to trigger the events. – epascarello Sep 16 '19 at 15:22
  • @wOxxOm the focus doesn't move the label up and I believe it is due to the tabIndex="0". Is there any workaround? – Noam Suissa Sep 16 '19 at 15:55
  • They probably want a `keydown` or `click` event. Inspect the event listeners of the input and/or label element (as well as maybe some of their ancestors). Just send a dummy event (you may have to use the vanilla dispatchEvent, not jQuery). – wOxxOm Sep 16 '19 at 15:58

0 Answers0