Focus on readonly input

Question

I have a form with three inputs the last of them has the readonly property, so the focus is missing because the way that the user fills the last input is by clicking some buttons, like a virtual keyboard. So everything works fine. But I'm trying to press enter and submit my form but since I lost the focus after the second input, my submit is not working. How can I resolve this?

form.html

<form name="myForm"
          role="form" 
          ng-submit="signin()" 
          novalidate>

        <input type="text" name="input1"/>
        <input type="text" name="input2"/>

        <div ng-controller="mycontroller">
            <span ng-click="fillInput3()">A</span>
            <span ng-click="fillInput3()">B</span>
            <span ng-click="fillInput3()">C</span>
        </div>
        <input type="text" name="input3" readonly=""/>

        <button type="submit">Ok</button>
    </form>

http://stackoverflow.com/questions/7802510/setting-focus-on-a-button-is-not-working — Fals, Jul 14 '15 at 19:55
I have never used [tag:angularjs] but in plain html and javascript you can set a [tabindex](http://w3c.github.io/html-reference/global-attributes.html#common.attrs.tabindex) of controls. — surfmuggle, Jul 14 '15 at 20:01
@threeFourOneSixOneThree but in some cases I do not press the `tab` key in my last input, since this input is filled by the action of buttons. — napstercake, Jul 14 '15 at 20:35

Sudhansu Choudhary · Answer 1 · 2015-07-14T20:19:41.173

1

Try this,

give an id to your button,

<button type="submit" id="submitButton">Ok</button>

In your controller, insert $window as the dependency,

app.controller('yourController', function($scope, $window){

})

Then in fillInput3() function write this,

    var element = $window.document.getElementById("submitButton");
    if(element)
    element.focus();

This would focus the "submit" button as you exit the fillInput3() function.

edited Jul 14 '15 at 20:19

answered Jul 14 '15 at 20:01

Sudhansu Choudhary

3,322
3
19
30

Same result here :(, clean console using $window or using $jquery is not working. – napstercake Jul 14 '15 at 20:33

Focus on readonly input

1 Answers1