Question

需要帮助解决此问题的方法，以消除输入值上的边框颜色。

一旦用户在输入边框颜色中输入值将触发，但是当没有值时，边框颜色应更改为继承颜色。

谢谢。

var minLength = 9;
var maxLength = 12;
$(document).ready(function(){
  var altNumberVal = $('#AlternateNumber');
    altNumberVal.on('keydown keyup change', function(){
        var char = $(this).val();
        var charLength = $(this).val().length;
        if(charLength < minLength){
          altNumberVal.css("border-color","red");
        }
      else if(charLength > maxLength){
            $(this).val(char.substring(0, maxLength));
        }
      else{
            altNumberVal.css("border-color","inherit");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<input id="AlternateNumber" placeholder="1234"></input>

Answer 1

您需要添加 condition 来检查输入内容是否为空charLength > 0

if(charLength < minLength && charLength > 0){}

var minLength = 9;
var maxLength = 12;
$(document).ready(function(){
  var altNumberVal = $('#AlternateNumber');
    altNumberVal.on('keydown keyup change', function(){
        var char = $(this).val();
        var charLength = $(this).val().length;
        if(charLength < minLength && charLength > 0){
          altNumberVal.css("border-color","red");
        }
      else if(charLength > maxLength){
            $(this).val(char.substring(0, maxLength));
        }
      else{
          
            altNumberVal.css("border-color","inherit");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<input id="AlternateNumber" placeholder="1234"></input>

如果输入的值为空，则删除边框颜色

1 个答案: