如何动态地将css类添加到输入中

Posted 2023-02-22

【中文标题】如何动态地将css类添加到输入中

【英文标题】：How to dynamically add css class to the input

【发布时间】：2016-12-20 21:12:02

【问题描述】：

<div class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Password</label>
    <input confirm_password type="password" name="password" class="form-control" id="i2">
</div>

<div id="confirm_pwd_item" class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Confirm Password</label>
    <input confirm_password type="password" name="password_confirmation" class="form-control" id="i2">
</div>

我的方式

$('input[confirm_password]').each(function()
    $(this).bind('input propertychange',function()
        setTimeout(function()
            if($('input[name=password]').val() !== $('input[name=password_confirmation]').val())
                $("#confirm_pwd_item").addClass('has-error');
            
            else
                $("#confirm_pwd_item").removeClass('has-error');
            
        ,100)
    )
)

我刚刚开始使用这个框架。

如果密码和确认密码不相等，我想加has-error输入。

但是，这不是好办法。

如果没有setTimeout函数：

【问题讨论】：

为什么是这个 setTimeout()？

【参考方案1】：

jQuery(document).ready(function($)
  $('input[name="password_confirmation"]').change(function()
    var prevPass = $('input[name="password"]').val();
    if($(this).val() != prevPass)
      $(this).addClass('has-error');
    
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Password</label>
    <input confirm_password type="password" name="password" class="form-control" id="i2">
</div>

<div id="confirm_pwd_item" class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Confirm Password</label>
    <input confirm_password type="password" name="password_confirmation" class="form-control" id="i2">
</div>

【参考方案2】：

$("input[type=password]").keyup(function()
  var pass=$('#i2').val();
  var cpass=$('#ci2').val();
  if(pass!=cpass)
    $('input[type=password]').addClass('has-error');
  else
    $('input[type=password]').removeClass('has-error');
  
);

.has-error
  border: 1px solid #ff0000 !important;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Password</label>
    <input confirm_password type="password" name="password" class="form-control" id="i2">
</div>

<div id="confirm_pwd_item" class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Confirm Password</label>
    <input confirm_password type="password" name="password_confirmation" class="form-control" id="ci2">
</div>

<button type="button" class="btn btn-default" id="button">Click</button>

【参考方案3】：

你可以使用blur事件，在jQuery中你可以使用toggleClass( className, state )。

'has-error' 类必须在相应的 div 上切换。

$(function () 
  $('input[name="password_confirmation"]').on('blur', function (e) 
    var pwd = $('input[name="password"]').val();
    var confirmPwd = $(this).val();
    $(this).closest('div').toggleClass('has-error', pwd != confirmPwd);
  )
);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Password</label>
    <input confirm_password type="password" name="password" class="form-control" id="i1">
</div>

<div id="confirm_pwd_item" class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Confirm Password</label>
    <input confirm_password type="password" name="password_confirmation" class="form-control" id="i2">
</div>