Question

我正在尝试使用angularjs来改善自己。所以在我的表单页面中，我有一个 a href 元素来打开我在同一页面中的bootstrap模式。

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

输入选项卡键在Bootstrap模式中不起作用

1 个答案: