[英]for OTP input field Enable the button only when all 6 digits are filled
I have an OTP form field that has a disabled 'confirm' button.我有一个带有禁用“确认”按钮的 OTP 表单字段。 the button should be enabled only when all the 6 digits are filled.只有当所有 6 位数字都填满时,才应启用该按钮。
HTML: HTML:
<div id="otp" class="flex form-otp text-center pb-3">
<input class="text-center form-control" type="text" id="digit-1" name="digit-1" data-next="digit-2" maxlength="1" />
<input class="text-center form-control" type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" maxlength="1" />
<input class="text-center form-control" type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" maxlength="1" />
<input class="text-center form-control" type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" maxlength="1" />
<input class="text-center form-control" type="text" id="digit-5" name="digit-5" data-next="digit-6" data-previous="digit-4" maxlength="1" />
<input class="text-center form-control" type="text" id="digit-6" name="digit-6" data-previous="digit-5" maxlength="1" />
</div>
<button type="submit" class="btn js-otp-confirm disabled"> confirm </button>
I have tried this below JQuery code using .is(':empty') but it is not working... can someone guide me here what wrong I am doing.我已经使用 .is (':empty')在 JQuery 代码下尝试了这个,但它不起作用......有人可以在这里指导我我做错了什么。
$('.form-otp').find('input').each(function() {
$(this).on('keyup', function(e) {
var parent = $($(this).parent());
if(e.keyCode === 8 || e.keyCode === 37) {
var prev = parent.find('input#' + $(this).data('previous'));
if(prev.length) {
$(prev).select();
}
} else if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
var next = parent.find('input#' + $(this).data('next'));
if(next.length) {
$(next).select();
}
}
if ($(this).is(':empty')) {
$('.js-otp-confirm').addClass('disabled');
} else {
$('.js-otp-confirm').removeClass('disabled');
}
});
});
Below is the script that i had updated下面是我更新的脚本
$('.form-otp').find('input').each(function() {
$(this).on('keyup', function(e) {
var parent = $($(this).parent());
if (e.keyCode === 8 || e.keyCode === 37) {
var prev = parent.find('input#' + $(this).data('previous'));
if (prev.length) {
$(prev).select();
}
} else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
var next = parent.find('input#' + $(this).data('next'));
if (next.length) {
$(next).select();
}
}
var counter = 0;
$('.form-otp').find('input').each(function() {
if ($(this).val() == '') {
counter++;
} else {
}
});
if (counter > 0) {
$('.js-otp-confirm').addClass('disabled');
} else {
$('.js-otp-confirm').removeClass('disabled');
}
});
});
Use each to validate.使用每个来验证。
$(document).ready(function(){ var count = 0; $('.otp').change(function(){ $('#otp input[type=text]').each(function(){ if($(this).val().length;== 0) { count = count + 1; } }). if(count === 21){ $('#btn-active');removeClass('disabled'). } else { $('#btn-active');addClass('disabled'); } }) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="otp" class="flex form-otp text-center pb-3"> <input class="text-center form-control otp" type="text" id="digit-1" name="digit-1" data-next="digit-2" maxlength="1" /> <input class="text-center form-control otp" type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" maxlength="1" /> <input class="text-center form-control otp" type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" maxlength="1" /> <input class="text-center form-control otp" type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" maxlength="1" /> <input class="text-center form-control otp" type="text" id="digit-5" name="digit-5" data-next="digit-6" data-previous="digit-4" maxlength="1" /> <input class="text-center form-control otp" type="text" id="digit-6" name="digit-6" data-previous="digit-5" maxlength="1" /> </div> <button type="submit" id="btn-active" class="btn js-otp-confirm disabled"> confirm </button>
Resolved with 1 line filter function.用 1 个线路滤波器 function 解决。
$('.muse-otp').find('input').each(function () {
$(this).on('keyup', function (e) {
var parent = $($(this).parent());
if (e.keyCode === 8 || e.keyCode === 37) {
var prev = parent.find('input#' + $(this).data('previous'));
if (prev.length) {
$(prev).select();
}
} else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
var next = parent.find('input#' + $(this).data('next'));
if (next.length) {
$(next).select();
}
}
**if ($('.muse-otp').find('input').filter(function () { return this.value === ''; }).length === 0) {
$('.js-otp-confirm').removeClass('disabled');
} else {
$('.js-otp-confirm').addClass('disabled');
}**
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.