Autofocus on fields with a default value

Question

The problem I'm having is that I have a default value in a field, "0.00," that shows the user the format that is valid. I can use placeholder, but that disappears on autofocus. The default value is also controlled by javascript.

When the page loads, the autofocus is active for a split second, and then the default value is put into the field and autofocus disappears. So is there a way to:

a) Force autofocus on fields with values or b) force autofocus to take effect after everything loads, including javascript?

I have already tried the regular <input id="field" autofocus="autofocus" value="{{code}} /> and the document.getElementById("field").focus();.

EDIT:

Okay. So it was a fault on my own. I was thinking my mask js was the culprit in this and then started thinking, the default value appears, the autofocus cursor appears, then it disappears when the page is fully loaded. So in that order, something other than the masking js is causing the autofocus to disappear. So I figured out that since I'm also using the jquery form wizard, and it's set to focusFirstInput:true, that it's removing my HTML5 autofocus and affixing it to the first input, which is a disabled field.

Fixed the problem. Thanks for your help.

Answer 1

Okay. So it was a fault on my own. I was thinking my mask js was the culprit in this and then started thinking, the default value appears, the autofocus cursor appears, then it disappears when the page is fully loaded. So in that order, something other than the masking js is causing the autofocus to disappear. So I figured out that since I'm also using the jquery form wizard, and it's set to focusFirstInput:true, that it's removing my HTML5 autofocus and affixing it to the first input, which is a disabled field.

Fixed the problem. Thanks for your help.

Answer 2

If you focus a form input, the content should clear. This way, the user can start typing without having to remove the original value.

Your solution a) would be not to use autofocus for form fields where the value format should be presented to the user. Or b) use a separate label to present the desired value and check with HTML5 or JS whether the inserted value is allowed.