javascript - 输入 tab 键在 Bootstrap Modal 中不起作用

Question

我正在尝试使用 angularjs 来提高自己。因此，在我的表单页面中，我有一个 a href 元素来打开同一页面中的引导模式。

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

我的模态代码是；

<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>

还有isNumber函数代码为；

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 根据页面加载的一些数据更改 true 或 false。

当我的模式打开时，我尝试使用 Tab 键向下进行其他输入，但它无法正常工作。它只是堆栈在第一个输入元素上。

我还尝试使用 html“tabIndex”属性进行输入，但它也不起作用。

我哪里做错了？

Answer 1

按下 Tab 键时，isNumber 函数返回 false (onkeypress="return isNumber(event)")。事件处理程序的返回值决定是否也应该发生默认的浏览器行为。由于返回 false，因此不会执行默认选项卡行为。

要解决此问题，您可以将 isNumber 更改为以下内容:

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;
}