Focus not correct In input when page loaded and loading saved form details

Question

I have a PHP login form which allows the saving of the form details and pre-populates when loaded.

The issue I am having is that on the first time entry, although the input s are displaying the form details, the value s are coming back as empty.

My focus is setting to my input but is displaying at the beginning of the pre-populated username input rather than the end as I'd expect so is inconvenient for the user should they need to delete the pre-populated input .

Code sample (Code only relevant for the isuue)

 var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime); var unField = document.getElementById('usernameField'); var pwField = document.getElementById('passwordField'); window.onload = function() { // required to auto enable 'Login' button on load using Chrome if (isChrome) { unField.classList.add('autofilled'); pwField.classList.add('autofilled'); }; inputCheck(); // this is setting the focus but doesn't appear to work correclty unField.focus(); }; function inputCheck() { var username = unField.value; var password = pwField.value; if ((username.length == 0 || password.length == 0) && (!unField.classList.contains('autofilled') || !pwField.classList.contains('autofilled'))) { loginButton.disabled = true; } else { loginButton.disabled = false; } }

 <form action="/URL" method="post"> <input id="usernameField" type="search" class="form-control" name="LoginForm[username]" placeholder="Enter your username" onkeyup="inputCheck()" tabindex='1' required /> <input id="passwordField" type="password" class="form-control" name="LoginForm[password]" placeholder="Enter your password" onkeyup="inputCheck()" tabindex='2' required /> </form>

As you can see the cursor is displaying at the beginning of the username and not the end as I'd expect

The form is populating via the 'Password Manager' so the input s values (according to the console) are 'Empty'. I have also tried simulating a click elsewhere as, as soon as you click anywhere it then registers the inputs have a value.

Answer 1

Here is the function for setting up the caret at the end, ( Set Focus After Last Character in Text Box )

 function SetCaretAtEnd(elem) { var elemLen = elem.value.length; // For IE Only if (document.selection) { // Set focus elem.focus(); // Use IE Ranges var oSel = document.selection.createRange(); // Reset position to 0 & then set at end oSel.moveStart('character', -elemLen); oSel.moveStart('character', elemLen); oSel.moveEnd('character', 0); oSel.select(); } else if (elem.selectionStart || elem.selectionStart == '0') { // Firefox/Chrome elem.selectionStart = elemLen; elem.selectionEnd = elemLen; elem.focus(); } // if } const input = document.getElementById('focusInput') SetCaretAtEnd(input)

 <input value="test" id="focusInput">

you can try it out like this in your code, inside onload function

setTimeout( function(){ SetCaretAtEnd(unField) }, 2000)

if your input is focused and you can see the cursor, it should jump at the end after the setTimeout fires

You can run the snippet to test it