Question

当我将类has-error和has-success添加到最近的div时，为什么它会使输入元素#confirmPassword移动到下一行？

HTML -

<form method = "post" action = "" ng-controller = "resettingCtrl as reset">

  <div class="form-group row">
    <label for="password" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="Password" ng-model="reset.password">
    </div>
  </div>

  <div class="form-group row">
    <label for="confirmPassword" class="col-sm-2 form-control-label">Confirm</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" ng-model="reset.confirmPassword">
    </div>
  </div>

  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-info">Submit</button>
    </div>
  </div>

</form>

JS -

'use strict';

angular.module('Att1App')
    .controller('resettingCtrl', resettingCtrl);

  function resettingCtrl() {   
    var self = this;

    self.pass = "";
    self.confirmPass = "";

    angular.element(document.getElementById("confirmPassword")).on("input", function () {

        if(self.pass != document.getElementById("confirmPassword").value) {

                var div1 = document.getElementById('confirmPassword').closest('div');
                //div1.className = "has-error";
                return false;
            }

            else {

                var div2 = document.getElementById('confirmPassword').closest('div');
                div2.className = "has-success";
                return true; 
            }
        });
    }

Answer 1

当您尝试以这种方式将has-success课程添加到div时：

var div2 = document.getElementById('confirmPassword').closest('div');
div2.className = "has-success";

您删除以前的div课程。在这种情况下，它会丢失负责其宽度的col-sm-10类，这就是输入变大并移动到下一行的原因

将您的代码更改为：

var div2 = document.getElementById('confirmPassword').closest('div');
div2.className += " has-success";

或如果你加载它就使用jQuery：

$("#confirmPassword").closest('div').addClass("has-success");

这两种方法都会将新类添加到div中，但也会保留现有的类。

Bootstrap类导致input元素移动到下一行

1 个答案: