时间戳

首页 > 解决方案 > 最小，最大长度和显示提交按钮不适用于小键盘

javascript - 最小，最大长度和显示提交按钮不适用于小键盘

问题描述

我创建了一个密码 pin 页面，用户必须在其中插入他们的密码，需要它像一个 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>

标签： javascript

解决方案

您的小键盘按钮不会触发$('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();
}

推荐阅读