這是一個驗證碼表單，我想在黃色輸入上顯示輸入的數字，但問題是當你輸入4個數字后，再輸入新的數字或更新舊的數字時，黃色輸入不更新，我想在黃色輸入上顯示數字，只有當所有4個輸入都有值時，如果沒有，就清除黃色輸入。
。var code = []。
$('.verf-code input').keyup(function(e) {
var key = e.which;
var val = $(this).val()。
$(this).each(function() {
if (key >=48 && key <=57) {
$(this).next('input') 。 select()。focus()。
code.push(val)。
return true。
} else {
return false;
}
});
if (code.length <= 4) {
$('.verification-code').val(code.join(''/span>))。
} else {
代碼 = [];
}
});.verification-code {
background: yellow;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div class="verf-code">/span>< input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" />。
< input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" />
< input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" />
< input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" /> </div>>
< input type="text" class="verification-code">uj5u.com熱心網友回復：
你不需要在你的keyup事件中進行額外的回圈（each）。你需要在每個位置更新code陣列，我使用index來做到這一點。
這里是作業樣本：
>。var code = []。
$('.verf-code input').keyup(function (e) {
var key = e.which;
var val;
if (key >= 48 & & key <= 57) {
val = $（this）.val()。
}
else val(); }
val = "-1"/span>;
$(this).next('input') 。 select()。focus()。
code[$(this).index()] = (val) 。
if (code.length == 4 && !code.includes（"-1"）)
$('.verification-code').val(code.join('')) 。
else
$('.verification-code').val('') 。
});.verification-code {
background: yellow;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div class="verf-code">/span>
< input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" />。
< input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" />
< input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" />
< input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" />
</div>
< input type="text" class="verification-code">uj5u.com熱心網友回復：
var code = []。
$('.verf-code input').on("input"，function(e) {
this.value = this。 value.match(/d/) || ""/span>。
if (this.value.length ==1) {
$(this).next('input') 。 select()。focus()。
code[$(this).index()] = this.value
const vc = code.join('')
$('.verification-code').val(vc.length ==4 ? vc : ') 。
}
});.verification-code {
background: 黃色。
width: 72px;
}
.verf-code {
width: 80px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div class="verf-code">/span>
< input class="afc-form__item__input" name="verf" type="text" maxlength maxlength="1" size="1" pattern="d" tabindex="1" />。
< input class="afc-form__item__input" name="verf" type="text" maxlength maxlength="1" size="1" pattern="d" tabindex="2" />
< input class="afc-form__item__input" name="verf" type="text" maxlength maxlength="1" size="1" pattern="d" tabindex="3" />
< input class="afc-form__item__input" name="verf" type="text" maxlength maxlength="1" size="1" pattern="d" tabindex="4" />
< input type="text" class="verify-code" readonly>
</div> uj5u.com熱心網友回復：
我會使用一個data-id屬性來跟蹤哪個輸入有一個值。
var code = []。
$('.verf-code input').keyup(function(e) {
var key = e.which;
var val = $(this).val() 。
code[$(this)。 attr("data-id")] = $（this）.val（）。
$(this).each(function(index) {
if (key >=48 && key <=57) {
$(this).next('input') 。 select().focus()。
return true。
} else {
return false;
}
});
var filtered = code.filter(function (el) {
return el != "";
});
if (filtered.length == 4) {
$('.verification-code').val(code.join(''/span>))。
} else {
$('.verification-code').val(' ')。
}
});.verification-code {
background: yellow;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div class="verf-code">/span>
< input data-id="0"/span> class="afc-form__item__input" name="verf""verf" type="text" maxlength="1" tabindex="1" />。
< input data-id="1"/span> class="afc-form__item__input" name="verf""verf" type="text" maxlength="1" tabindex="2" />。
< input data-id="2"/span> class="afc-form__item__input" name="verf""verf" type="text" maxlength="1" tabindex="3" />。
< input data-id="3"/span> class="afc-form__item__input" name="verf""verf" type="text" maxlength="1" tabindex="4" />
</div>
< input type="text" class="verification-code">轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/321680.html
標籤：