1. 程式人生 > >一個好看實用的6位驗證碼輸入框

一個好看實用的6位驗證碼輸入框

$(() => { var valCodeInput = $('#val-code-input'); var valCodeItems = $("div[name='val-item']"); var regex = /^[\d]+$/; var valCodeLength = 0; $('#val-box').on('click',()=>{ valCodeInput.focus(); }) valCodeInput.on('input propertychange change'
, (e) => { valCodeLength = valCodeInput.val().length; if(valCodeInput.val() && regex.test(valCodeInput.val())) { $(valCodeItems[valCodeLength - 1]).addClass('available'); $(valCodeItems[valCodeLength - 1
]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength)); } }) $(this).on('keyup', (e) => { if(e.keyCode === 8) { $(valCodeItems[valCodeLength]).removeClass('available'); $(valCodeItems[valCodeLength]).text(""
); } }); }) function checkForNum(obj) { obj.value = obj.value.replace(/[\D]/g, ''); }