我有一个信用卡字段,我想在用户输入其信用卡号时处理.假设用户可以输入数字和字母字符,并且必须每四个字符添加一个空格.输入部分工作正常,但我有退格问题.如果我将光标放在数字上,则使用退格键删除有效,但当光标位于某个空格时,它无法正常工作:在这种情况下,用户必须按住退格键才能正确删除某些输入.
另一个要求是让剪贴板操作(复制,剪切,粘贴)在该字段上正常工作.
我不能使用任何插件的解决方案(如JQuery Mask插件),如果可能的话我不会直接使用keyCode.
更新了 JS Fiddle:https://jsfiddle.net/ot2t9zr4/10/
片段
$('#credit-card').on('keypress change blur', function () {
$(this).val(function (index, value) {
return value.replace(/[^a-z0-9]+/gi, '').replace(/(.{4})/g, '$1 ');
});
});
$('#credit-card').on('copy cut paste', function () {
setTimeout(function () {
$('#credit-card').trigger("change");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<form class="" action="" method="post">
<fieldset>
<legend>Payment</legend>
<div class="beautiful-field field-group credit-cart">
<label class="label" for="credit-card">Credit card</label>
<input class="field" id="credit-card" value="" autocomplete="off" type="text" />
</div>
</fieldset>
</form>
</div>