Search code examples
javascriptfirefoxautofilluserscripts

How to get this field to autofill - Kotak securities Neo login page nameless idless field

In this website https://neo.kotaksecurities.com/Login

How do I get the mobile number field to autofill? The input field neither has a name nor an id. The firefox autofill extension fails to detect the input field. Can I write a userscript and use it in TamperMonkey? How do I access the nameless and IDless field?
enter image description here

How do I populate it via a userscript? I think it is using dart to generate the webpage.

Here's the relevant source code

<body flt-renderer="html (requested explicitly)" flt-build-mode="release" style="position: fixed; inset: 0px; overflow: hidden; padding: 0px; none; touch-action: none; font: 14px sans-serif; color: red;" spellcheck="false">
   <!--Google Tag Manager (noscript)--> 
   <noscript></noscript>
   <!--End Google Tag Manager (noscript)-->
   <script></script>
   <script></script>
   <script></script>
   <script defer="" crossorigin="anonymous" src="https://lapi.kotaksecurities.com/eum/eum.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.js" type="text/javascript"></script>
   <script type="text/javascript"></script> <script src="main.dart.js" type="application/javascript"></script> event
   <flt-glass-pane style="position: absolute; inset: 8px; cursor: default;">
      event
      #shadow-root (open)
      <style> </style>
      <fit-semantics-placeholder role="button" aria-live="polite" tabindex="e" aria-label="Enable accessibility"
         style="position: absolute; left: -1px; top: 1px; width: 1px; height: 1px;">
      </flt-semantics-placeholder> event
      <flt-scene-host style="pointer-events: none;">
      </fit-scene-host> 
      <flt-semantics-host style="position: absolute; transform-origin: 0px 0px 8px; transform: scale(1.25);">
      </flt-semantics- host>
      <flt-ruler-host style="position: fixed; visibility: hidden; overflow: hidden; top: 0px; left: 0px; width: 0px; height:
         8px;">
      </fit-ruler-host>
      <form novalidate="" method="post" action="#" style="white-space: pre-wrap; align-content: center; padding: 0px; -px; transform-origin: 0px 0px 8px; caret-color: transparent;"> event
         <input class="submitBtn" style="white-space: pre-wrap; align-content: center; padding: 0px; 8px; top: -9999px; left: -9999px; caret-color: transparent;" type="submit">
         <input class="fit-text-editing" autocomplete="on" autocorrect="on" style="white-space: pre-wrap; align-content: center; position: abso. height: 25px; transform: matrix(1, 0, 0, 1, 915.25, 238.5);"> event
      </form>
   </flt-glass-pane>
</body>

The input field I'm interested in is the second input in the form:

<input class="fit-text-editing" autocomplete="on" autocorrect="on" style="white-space: pre-wrap; align-content: center; position: abso. height: 25px; transform: matrix(1, 0, 0, 1, 915.25, 238.5);"> event

For clarity the dev-tools screenshot is also posted enter image description here

Solution

  • This code works. It works only on the first click though, I'm not sure why. If it can display a dropdown autofill entry selection list that would be the ultimate thing I guess, but it works for now. Thanks @GrafiCode for the tip! Much appreciated!!

        // ==UserScript==
// @name            Kotak Neo Autofill Mobile nameless idless input field
// @namespace
// @version         1
// @license         MIT http://www.opensource.org/licenses/MIT
// @include https://neo.kotaksecurities.com/Login
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_setClipboard
// @grant unsafeWindow
// @grant window.close
// @grant window.focus
// @run-at document-idle


// ==/UserScript==



(function() {
    function onClick(evt) {
            const el = document.querySelector('flt-glass-pane')
            const mobInput = el.shadowRoot.querySelector('form input+input')
            mobInput.value = +919012345678
            mobInput.dispatchEvent(new KeyboardEvent("keyup", {
               "key": "9",
               "keyCode": 57,
               "which": 57,
               "code": "Digit9",
               "location": 0,
               "altKey": false,
               "ctrlKey": false,
               "metaKey": false,
               "shiftKey": false,
               "repeat": false
           }));

    }
    document.addEventListener('click', onClick);
}) ();