Question

我想防止输入字段出现“空格”。使用当前代码可以很好地工作。

但是，如果div具有类名“名称”。允许空间。

名称输入字段必须留有空格。策略输入块空间。

 $('.form-group input').keypress(function(e){
   if (e.which === 32) {
     e.preventDefault();      
   }
 }).blur(function() {
     $(this).val(function(i,oldVal){
       return oldVal.replace(/\s/g,'');
     });         
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 col-lg-6 offset-lg-1 form-group" data-field-name="policyowner_name">
       <div class="form-group__multi name">
         <span>
           <label for="form-firstname" class="visuallyhidden">First Name</label>
             <input type="text" id="form-firstname" class="form-control" name="policyowner_first_name" placeholder="Given name" value="" aria-describedby="policyNameAria">
         </span>
       </div>
    </div>

    <div class="policy-num col-12 col-lg-6 offset-lg-1 form-group has-error" data-field-name="policy_number">
      <label for="id_policy_1" class="visuallyhidden">Policy Number</label>
        <input class="form-control alphanum-input" type="text" id="id_policy_1" name="policy_number">
    </div>

Answer 1

您可以使用hasClass和this来检查类是否存在。

  $('.form-group input').keypress(function(e){
    if($(this).hasClass("name"))
    {
      //Do nothing or whatever you want
    }
    else if (e.which === 32) {
        e.preventDefault();      
     }
    }).blur(function() {
     $(this).val(function(i,oldVal){
        return oldVal.replace(/\s/g,'');
     });         
    });

Answer 2

您还可以像!$("#form-firstname").closest('.name, .form-group').hasClass('name')这样的条件。它将检查是否存在类name的任何父div。

$('.form-group input').keypress(function(e){
    if (e.which === 32 && !$(this).closest('.name, .form-group').hasClass('name')) {
        e.preventDefault();      
    }
}).blur(function() {
    $(this).val(function(i, oldVal){
        return oldVal.replace(/\s/g,'');
        // Or if you want to allow space in blur also then use following line.
        // return $(this).closest('.name, .form-group').hasClass('name') ? oldVal : oldVal.replace(/\s/g,'');
    });                 
});

您可以在下面测试代码。

$('.form-group input').keypress(function(e) {
  if (e.which === 32 && !$(this).closest('.name, .form-group').hasClass('name')) {
    e.preventDefault();
  }
}).blur(function() {
  $(this).val(function(i, oldVal) {
    //return oldVal.replace(/\s/g, '');
    // Or if you want to allow space in blur also then use following line.
    return $(this).closest('.name, .form-group').hasClass('name') ? oldVal : oldVal.replace(/\s/g,'');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 col-lg-6 offset-lg-1 form-group" data-field-name="policyowner_name">
  <div class="form-group__multi name">
    <span>
           <label for="form-firstname" class="visuallyhidden">Div with name class</label>
             <input type="text" id="form-firstname" class="form-control" name="policyowner_first_name" placeholder="Given name" value="" aria-describedby="policyNameAria">
         </span>
  </div>
</div>

<div class="col-12 col-lg-6 offset-lg-1 form-group" data-field-name="policyowner_name">
  <div class="form-group__multi">
    <span>
           <label for="form-firstname" class="visuallyhidden">Div without name class</label>
             <input type="text" id="form-firstname" class="form-control" name="policyowner_first_name" placeholder="Given name" value="" aria-describedby="policyNameAria">
         </span>
  </div>
</div>

Answer 3

您可以使用 hasClass（）来检查是否存在封闭div的类，如下所示。

$('.form-group input').keypress(function(e){
   if(!$(this).closest('div').hasClass('name') && e.which === 32){
      e.preventDefault();   
   } 
 }).blur(function() {
     $(this).val(function(i,oldVal){
       return oldVal.replace(/\s/g,'');
     });         
 });

jQuery输入基于div类名称的允许/阻止

3 个答案: