我一直在尋找 Vanilla Javascript 解決方案，將代碼復(fù)制粘貼到多個輸入字段中。我在互聯(lián)網(wǎng)上找到了解決方案，但都是基于 jQuery 的。?這是 jQuery 解決方案<input?type="text"?maxlength="1">
<input?type="text"?maxlength="1">
<input?type="text"?maxlength="1">
<input?type="text"?maxlength="1">
<input?type="text"?maxlength="1">
<input?type="text"?maxlength="1">我從電子郵件中復(fù)制了此代碼，并將代碼粘貼到任何輸入字段中，它將在每個字段中一一粘貼完整的代碼。然后使用預(yù)先保存的代碼驗證此代碼。我正在尋找在普通 JavaScript中粘貼然后收集和驗證代碼。
1 回答
小唯快跑啊
TA貢獻(xiàn)1863條經(jīng)驗 獲得超2個贊
這是一種方法，可以輕松修改它以處理特定的文本輸入，但這可以確保頁面上的每個文本輸入從剪貼板獲取相同的數(shù)據(jù)。
旁注：querySelectorAll返回 anodelist而不是數(shù)組，您可以在 a 中[].forEach.call使用數(shù)組的方法。forEachnodelist
// Listen to paste on the document
document.addEventListener("paste", function(e) {
// if the target is a text input
if (e.target.type === "text") {
var data = e.clipboardData.getData('Text');
// split clipboard text into single characters
data = data.split('');
// find all other text inputs
[].forEach.call(document.querySelectorAll("input[type=text]"), (node, index) => {
// And set input value to the relative character
node.value = data[index];
});
}
});
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
- 1 回答
- 0 關(guān)注
- 121 瀏覽
添加回答
舉報
0/150
提交
取消