All geek questions in one place

Tab order issue in IE with initial field selection in Javascript form

I am trying to perform the following behavior in html: the user is presented with a form with several text fields. Fields are filled with default values, but in many cases the user will want to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply typing in the type and going to the next field, or just leave it and exit it. Here is an example that I have:

<html>
    <body onload="document.getElementById('helloField').select()">
        <form>
            <input id="helloField" value="hello"/><br/>
            <input value="goodbye"/><br/>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

This works in Chrome (and Firefox, I believe, but I don't have one). In IE, the field is selected as planned, but when the user clicks the tab, the browser goes to its address bar, and not to the farewell field. If I replace select with simple focus like

<body onload="document.getElementById('helloField').focus()">

, , , . , , .

- ?

.

+3
2

, .

script . , document.onload , , , , onload ( ).

<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
    var hello= document.getElementById('helloField');
    hello.focus();
    hello.select();
</script>
+6

tabindex:

<html>
    <body onload="document.getElementById('helloField').select()">
        <form>
            <input id="helloField" value="hello" tabindex="1" /><br/>
            <input value="goodbye" tabindex="2" /><br/>
            <input type="submit" value="Submit" tabindex="3" />
        </form>
    </body>
</html>
+1

Source: https://habr.com/ru/post/1704469/

More articles:


All Articles