Mc Gyver Basaya Mc Gyver Basaya - 4 months ago 36
HTML Question

Tab key doesn't work in my input form in mozilla but works in google chrome

I have 3 input field in my form, what I want is I want the user to use the tab key button from his keyboard allowing the user to jump to the next input text...

the problem is in my google chrome browser it works fine using TAB, but in mozilla browser using the TAB button it doesn't allow me to jump to another input text.

here is my form that I have done. trying to add tabindex but doesn't work in mozilla.

<form class="form-style col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
<div class="form-group">
<input tabindex="1" type="text" class="form-control input-xxlarge" id="data1" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="2" placeholder="How would you rate yourself, on a scale of 1-12?">
</div>
<div class="form-group">
<input tabindex="2" type="text" class="form-control input-xxlarge" id="data2" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="2" placeholder="What is your ideal goal, on a scale of 1-12?">
</div>
<div class="form-group">

<textarea tabindex="3" class="form-control input-xxlarge" id="comment" placeholder="Improvement ideas"></textarea>
<style type="text/css">
textarea {
resize: none;

min-height: 100px;
max-height: 200px;
}
</style>
</div>
<input tabindex="4" type="submit" class="btn btn-success btn-large" value="NEXT" disabled="disabled">
</form>


thanks...

Answer

You need to allow TAB key to focus in next control ..

In your keypress event

onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode=0'

And your html form is :

<form class="form-style col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">
    <div class="form-group">
<input tabindex="1" type="text" id="txt1" onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode=0' class="form-control input-xxlarge" id="data1"  maxlength="2" placeholder="How would you rate yourself, on a scale of 1-12?">
    </div>
    <div class="form-group">
        <input tabindex="2" type="text" class="form-control input-xxlarge" id="data2" onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode=0' maxlength="2" placeholder="What is your ideal goal, on a scale of 1-12?">
    </div>
        <div class="form-group">

        <textarea tabindex="3" class="form-control input-xxlarge" id="comment" placeholder="Improvement ideas"></textarea>
   <style type="text/css">
textarea {
    resize: none;

    min-height: 100px;
    max-height: 200px;
}
 </style>
     </div>
  <input tabindex="4" type="submit" class="btn btn-success btn-large" value="NEXT" disabled="disabled">
</form>
Comments