输入制表符键在 Bootstrap 模式中不起作用

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 键时，false 由 isNumber 函数 (onkeypress="return isNumber(event)") 返回。事件处理程序的返回值决定了默认浏览器行为是否也应该发生。由于返回false，所以不执行默认的tab行为。

要解决此问题，您可以将 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;
}