CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsforms
codebear22
codebear22

Reputation: 1877

Focus on readonly input

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>

Upvotes: 0

Views: 6302

Answers (1)

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

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.

Upvotes: 1

Related Questions