Question

我创建了一个密码固定页面，用户必须在其中插入密码，就像POS NUMPAD一样。

我正在尝试使javascript中所述的条件起作用。

规则：最小输入不超过4时不显示提交按钮

当我使用数字键盘输入数字时不起作用，但是当我输入不带数字键盘的数字时起作用。

请有人帮我解决这个问题。

$(document).ready(function() {
$('button[type="submit"]').attr('disabled', true);

$('input').on('keyup',function()
{
    var input_val = $("#cc-pin").val();
 
    var minLength = $("#cc-pin").attr( 'minlength' );
 
    if(input_val != '' && input_val.length >= minLength)
    {
        $('button[type="submit"]').attr('disabled' , false);
    }
    else
    {
        $('button[type="submit"]').attr('disabled' , true);
    }
});

});




	function addNumber(element){
  document.getElementById('cc-pin').value = document.getElementById('cc-pin').value+element.value;
}

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid red;
  border-radius: 4px;
}

element.style {
    text-align: center;
    color: red;
}	

.fbutton { 
  background-color: #655F5F; /* #4CAF50 */
  border: 2px solid #000;
  border-radius: 12px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="" accept-charset="UTF-8" id="creditCard">
<div class="pinalert">
	<input id="cc-pin" style="text-align: center; color: red;" class="validate mbs date" name="cc-pin" type="password" maxlength="6" minlength="4" value="" data-mask="######" required>
        <label for="cc-pin"> </label><br /><br /> 

    <input id="cc-pin" type="button" class="fbutton" name="1" value="1" id="1" onClick=addNumber(this); />
		<input id="cc-pin" type="button" class="fbutton" name="2" value="2" id="2" onClick=addNumber(this); />
		<input id="cc-pin" type="button" class="fbutton" name="3" value="3" id="3" onClick=addNumber(this); /> <br /><br>
		<input id="cc-pin" type="button" class="fbutton" name="4" value="4" id="4" onClick=addNumber(this); />
		<input id="cc-pin" type="button" class="fbutton" name="5" value="5" id="5" onClick=addNumber(this); />
		<input id="cc-pin" type="button" class="fbutton" name="6" value="6" id="6" onClick=addNumber(this); /> <br /><br>
		<input id="cc-pin" type="button" class="fbutton" name="7" value="7" id="7" onClick=addNumber(this); />
		<input id="cc-pin" type="button" class="fbutton" name="8" value="8" id="8" onClick=addNumber(this); />
		<input id="cc-pin" type="button" class="fbutton" name="9" value="9" id="9" onClick=addNumber(this); /> <br /><br>
		<input id="cc-pin" type="button" class="fbutton" name="0" value="0" id="0" onClick=addNumber(this); />


</div>

                    
                    <button type="submit" class="btn btn-medium wide-sm center">SUBMIT</button>


                            
                                                    </div>
                                                </form>

Answer 1

您的数字键盘按钮不会触发$('input').on('keyup',function()，因此永远不会触发input_val.length >= minLength验证。将验证逻辑分离为单独的函数，并让on('keyup')和addNumber()函数都执行它。

$(document).ready(function() {
  $('button[type="submit"]').attr("disabled", true);

  $("input").on("keyup", function() {
    validateInput();
  });
});

function validateInput() {
  var input_val = $("#cc-pin").val();

  var minLength = $("#cc-pin").attr("minlength");

  if (input_val != "" && input_val.length >= minLength) {
    $('button[type="submit"]').attr("disabled", false);
  } else {
    $('button[type="submit"]').attr("disabled", true);
  }
}

function addNumber(element) {
  document.getElementById("cc-pin").value =
    document.getElementById("cc-pin").value + element.value;
  validateInput();
}

最小，最大长度和显示提交按钮不适用于numpad

1 个答案: