CODEWITHSUNDEEP
javascripthtmlcordova
Dapope
Dapope

Reputation: 128

prevent focus from leaving form fields

In my app, i have a login form like this

<div id="container">
  <form name="login" id="login" method="post" action="">
    <input name="email" type="text" class="label" id="email" placeholder="Enter email...">
    <input name="password" type="password" class="label" id="password" placeholder="Enter password...">
    <input type="submit" name="submit" id="submit" value="Login">
    <a href="register.html" class="sign">Sign Up</a>
  </form>
</div>

On touch devices, when I tap the screen, focus leaves the form fields (input,button,links). This happens on blackberry and android devices, haven't tried it on the iphone.

How can i prevent focus from leaving form fields? I'm building the app with phonegap.

Upvotes: 2

Views: 2233

Answers (2)

origin1tech
origin1tech

Reputation: 749

could be as simple as a variable that maintains the current input selected.

$(document).ready(function () {
    var selected;
    $('input').focus(function (e){
       selected = $(this).attr('id');
    });
    $('window').blur(function() {
       $('#selected').focus();
    });
});

Upvotes: 0

Francisco Zarabozo
Francisco Zarabozo

Reputation: 3748

I don't think you can prevent the user from clicking/selecting something else, but you can return the focus whenever it looses it. Simplest case:

<input onblur="this.focus()" type="text" name="text1"/>

But you can lock the user forever into that input unless you replace that with a function that evaluates if the current input still needs focus for some reason and otherwise not trigger the focus again.

If your problem is when the user does that to scroll the page, then you can try something like this:

<script type="text/javascript">
    var last_selected_input;
    window.onscroll = function () {
        if (last_selected_input) {
            last_selected_input.focus();
        }
    }
</script>

<input type="text" name="text1" onfocus="last_selected_input = this" />

But you need to clear the variable last_selected_focus whenever a field is complete to avoid the persistent focus on each page scroll.

Upvotes: 1

Related Questions