Bootstrap密码揭示器陷入了错误

Question

一个Bootstrap密码揭示器，当我悬停眼睛按钮时，我的电脑会挂起。即使没有添加输入的代码，它也会自动添加输入。 输入自动增加，它使我的bowser挂起，然后我的整个PC接下来。 可能的原因和解决方案是什么？这导致我的PC挂起。

JSFIDDLE：https://jsfiddle.net/aice09/76b99w4m/

//Password Revealer
$(".reveal").mousedown(function() {
    $(".pwd").replaceWith($('.pwd').clone().attr('type', 'text'));
  })
  .mouseup(function() {
    $(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
  })
  .mouseout(function() {
    $(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
  });

.btn-primary {
  color: #0275d8;
  background-image: none;
  background-color: transparent;
  border-color: #0275d8;
}

.btn-primary:hover {
  background-color: #0275d8;
  color: white;
  border-color: #0275d8;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.jshttps://code.jquery.com/jquery-1.12.3.min.js"></script>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
  <div class="form-group">
    <label for="em_password">Password</label>
    <div class="input-group">
      <input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
      <span class="input-group-btn">
                                        <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
                                    </span>
    </div>
  </div>
</div>

<!-- // Modal -->

Answer 1

当您点击type

时，我只需将密码输入的text设置为.reveal

＆＃13;

＆＃13;

//Password Revealer
$(".reveal").on('click',function() {
	$('#em_password').attr('type','text');
})

＆＃13;

.btn-primary {
  color: #0275d8;
  background-image: none;
  background-color: transparent;
  border-color: #0275d8;
}

.btn-primary:hover {
  background-color: #0275d8;
  color: white;
  border-color: #0275d8;
}

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.btn-success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #419641;
}

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #5bc0de;
}

.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #2aabd2;
}

.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

.btn-warning:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #eb9316;
}

.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #c12e2a;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="navigation"></div>

<!-- Content Section -->
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <h1>Employee</h1>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="pull-right">
        <button class="btn btn-success addnewemployee" data-toggle="modal" data-target="#add_new_record_modal">Add New Job</button>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sales_individual_tb">
      <div class="records_content"></div>
    </div>
  </div>
</div>
<!-- /Content Section -->

<!-- Bootstrap Modals -->
<!-- Modal - Add New Record/User -->
<div class="modal fade bs-example-modal-lg" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add New Employee</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_firstname">First Name</label>
              <input type="text" id="em_firstname" placeholder="First Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_middlename">Middle Name</label>
              <input type="text" id="em_middlename" placeholder="Middle Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_lastname">Last Name</label>
              <input type="text" id="em_lastname" placeholder="Last Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_id">System ID</label>
              <input type="text" id="em_id" placeholder="System ID" class="form-control" readonly />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
            <div class="form-group">
              <label for="em_email">Email</label>
              <input type="text" id="em_email" placeholder="Email" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_position">Position</label>
              <select name="em_position" id="em_position" class="form-control" required="required">
                <option value="Position 1">Position 1</option>
                <option value="Position 2">Position 2</option>
                <option value="Position 3">Position 3</option>
              </select>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_department">Department</label>
              <select name="em_department" id="em_department" class="form-control" required="required">
                <option value="Department 1">Department 1</option>
                <option value="Department 2">Department 2</option>
                <option value="Department 3">Department 3</option>
                <option value="Department 4">Department 4</option>
              </select>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_password">Password</label>
              <div class="input-group">
                <input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
                <span class="input-group-btn">
                                        <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
                                    </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button>
      </div>
    </div>
  </div>
</div>
<!-- // Modal -->

<!-- Modal - Update User details -->
<div class="modal fade bs-example-modal-lg" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Update</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_firstname">First Name</label>
              <input type="text" id="update_em_firstname" placeholder="First Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_middlename">Middle Name</label>
              <input type="text" id="update_em_middlename" placeholder="Middle Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_lastname">Last Name</label>
              <input type="text" id="update_em_lastname" placeholder="Last Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_id">System ID</label>
              <input type="text" id="update_em_id" placeholder="System ID" class="form-control" readonly />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
            <div class="form-group">
              <label for="em_email">Email</label>
              <input type="text" id="update_em_email" placeholder="Email" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_position">Position</label>
              <select name="update_em_position" id="update_em_position" class="form-control" required="required">
                <option value="Position 1">Position 1</option>
                <option value="Position 2">Position 2</option>
                <option value="Position 3">Position 3</option>
              </select>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_department">Department</label>
              <select name="update_em_department" id="update_em_department" class="form-control" required="required">
                <option value="Department 1">Department 1</option>
                <option value="Department 2">Department 2</option>
                <option value="Department 3">Department 3</option>
                <option value="Department 4">Department 4</option>
              </select>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_password">Password</label>
              <div class="input-group">
                <input id="update_em_password" name="update_em_password" type="password" class="form-control pwd" maxlength="8" value="11">
                <span class="input-group-btn">
                                        <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
                                    </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()">Save Changes</button>
        <input type="hidden" id="hidden_user_id">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是我如何处理您的原始活动。

＆＃13;

＆＃13;

//Password Revealer
$passwd = $('#em_password');

$(".reveal").mousedown(function() {
    $passwd.attr('type', 'text');
  })
  .mouseup(function() {
    $passwd.attr('type', 'password');
  })
  .mouseout(function() {
    $passwd.attr('type', 'password');
});

＆＃13;

.btn-primary {
  color: #0275d8;
  background-image: none;
  background-color: transparent;
  border-color: #0275d8;
}

.btn-primary:hover {
  background-color: #0275d8;
  color: white;
  border-color: #0275d8;
}

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.btn-success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #419641;
}

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #5bc0de;
}

.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #2aabd2;
}

.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

.btn-warning:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #eb9316;
}

.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #c12e2a;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="navigation"></div>

<!-- Content Section -->
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <h1>Employee</h1>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="pull-right">
        <button class="btn btn-success addnewemployee" data-toggle="modal" data-target="#add_new_record_modal">Add New Job</button>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sales_individual_tb">
      <div class="records_content"></div>
    </div>
  </div>
</div>
<!-- /Content Section -->

<!-- Bootstrap Modals -->
<!-- Modal - Add New Record/User -->
<div class="modal fade bs-example-modal-lg" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Add New Employee</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_firstname">First Name</label>
              <input type="text" id="em_firstname" placeholder="First Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_middlename">Middle Name</label>
              <input type="text" id="em_middlename" placeholder="Middle Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_lastname">Last Name</label>
              <input type="text" id="em_lastname" placeholder="Last Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_id">System ID</label>
              <input type="text" id="em_id" placeholder="System ID" class="form-control" readonly />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
            <div class="form-group">
              <label for="em_email">Email</label>
              <input type="text" id="em_email" placeholder="Email" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_position">Position</label>
              <select name="em_position" id="em_position" class="form-control" required="required">
                <option value="Position 1">Position 1</option>
                <option value="Position 2">Position 2</option>
                <option value="Position 3">Position 3</option>
              </select>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_department">Department</label>
              <select name="em_department" id="em_department" class="form-control" required="required">
                <option value="Department 1">Department 1</option>
                <option value="Department 2">Department 2</option>
                <option value="Department 3">Department 3</option>
                <option value="Department 4">Department 4</option>
              </select>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_password">Password</label>
              <div class="input-group">
                <input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
                <span class="input-group-btn">
                                        <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
                                    </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button>
      </div>
    </div>
  </div>
</div>
<!-- // Modal -->

<!-- Modal - Update User details -->
<div class="modal fade bs-example-modal-lg" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Update</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_firstname">First Name</label>
              <input type="text" id="update_em_firstname" placeholder="First Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_middlename">Middle Name</label>
              <input type="text" id="update_em_middlename" placeholder="Middle Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_lastname">Last Name</label>
              <input type="text" id="update_em_lastname" placeholder="Last Name" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_id">System ID</label>
              <input type="text" id="update_em_id" placeholder="System ID" class="form-control" readonly />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
            <div class="form-group">
              <label for="em_email">Email</label>
              <input type="text" id="update_em_email" placeholder="Email" class="form-control" />
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_position">Position</label>
              <select name="update_em_position" id="update_em_position" class="form-control" required="required">
                <option value="Position 1">Position 1</option>
                <option value="Position 2">Position 2</option>
                <option value="Position 3">Position 3</option>
              </select>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_department">Department</label>
              <select name="update_em_department" id="update_em_department" class="form-control" required="required">
                <option value="Department 1">Department 1</option>
                <option value="Department 2">Department 2</option>
                <option value="Department 3">Department 3</option>
                <option value="Department 4">Department 4</option>
              </select>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div class="form-group">
              <label for="em_password">Password</label>
              <div class="input-group">
                <input id="update_em_password" name="update_em_password" type="password" class="form-control pwd" maxlength="8" value="11">
                <span class="input-group-btn">
                                        <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
                                    </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()">Save Changes</button>
        <input type="hidden" id="hidden_user_id">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;