input tab key does not work in Bootstrap Modal

Question

I am trying to use angularjs to improve myself. So in my form page I have an a href element to open my bootstrap modal which is in the same page.

<a class="btn btn-danger btn-condensed myPlusButton" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus"></i></a>

and my modal codes are;

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">
        <i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;modal title</h4>
    </div>
    <div class="modal-body">
      <form class="form-horizontal">
        <div class="panel panel-default">
          <div class="panel-body">
            <div class="form-group">
              <label class="col-md-4 col-xs-12 control-label">input 1 (only digits):</label>
              <div class="col-md-8 col-xs-12">
                <div class="input-group">
                  <span class="input-group-addon">
                    <span class="fa fa-check"></span>
                  </span>
                  <input name="firstinput" autocomplete="off" ng-model="myData.first" maxlength="11" type="text" class="form-control" onkeypress="return isNumber(event)">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-4 col-xs-12 control-label">input 2:</label>
              <div class="col-md-8 col-xs-12">
                <div class="input-group">
                  <span class="input-group-addon">
                    <span class="fa fa-font"></span>
                  </span>
                  <input name="secondinput" autocomplete="off" ng-disabled="isDisable" ng-model="myData.second" type="text" class="form-control">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-4 col-xs-12 control-label">input 3:</label>
              <div class="col-md-8 col-xs-12">
                <div class="input-group">
                  <span class="input-group-addon">
                    <span class="fa fa-id-card-o"></span>
                  </span>
                  <input name="thirdinput" ng-disabled="isDisable" ng-model="myData.third" maxlength="10" type="text" class="form-control">
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      <button type="button" ng-click="submitMyValues(myData)" ng-disabled="isDisable" class="btn btn-success">Save</button>
    </div>
  </div>
</div>

Also isNumber function codes are;

function isNumber(evt) {
evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}

isDisabled change either true or false according to the some data on page load.

When my modal open I try to use tab key to go down for other inputs but it does not work correctly. It's just stack on first input element.

Also I have tried to use html "tabIndex" attribute for input but it does not work too.

Where am I doing wrong?

Answer 1

When the tab key is pressed false is returned by the isNumber function (onkeypress="return isNumber(event)"). The return value of an event handler determines whether or not the default browser behaviour should take place as well. Since false is returned, the default tab behavior is not executed.

To fix this you could change isNumber to the following:

function isNumber(evt) {
evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;

  // Added this line. 9 is the code for the tab key.
  if(charCode === 9) return true;

  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}