应将每个文本框值的Javascript onpaste事件拆分并粘贴到相应的文本框中 [英] Javascript onpaste event of everytext box value should be split and paste in corresponding textbox
问题描述
严格没有jquery请
我有文本1234ABC984IK4H2J我有四个文本框onpaste我需要文本拆分并复制剩余文本框中的
纯粹在javascript中没有jquery as我的应用程序不支持jquery和IE> 8函数
所以没有函数支持如querySelectorAll和addEventlistener
Strictly no jquery please
I have text 1234ABC984IK4H2J and I have four text box onpaste i need text to split and copied
in remaining text box
Purely in javascript no jquery as my application doesn't support jquery and IE>8 functions
so no function supports like querySelectorAll and addEventlistener
HTML
<td><input type="text" id="id1" maxlength="4" size="4" onpaste="paste();"></input></td>
<td><input type="text" id="id2" maxlength="4" size="4" onpaste="paste();"></input></td>
<td><input type="text" id="id3" maxlength="4" size="4" onpaste="paste();"></input></td>
<td><input type="text" id="id4" maxlength="4" size="4" onpaste="paste();"></input></td>
JS
function paste(){
var inputs = new Array(6);
inputs[0] = document.getElementById("id1");
inputs[1] = document.getElementById("id2");
inputs[2] = document.getElementById("id3");
inputs[3] = document.getElementById("id4");
for (var i = 0, len = inputs.length;i < len; i++) {
var startingField = inputs[i].indexOf(e.target);
if (e.target.value.length > 4) {
completeTextFields(this.value, startingField);
}
}
}
//this is the code to fill the remaining text boxs
function completeTextFields(code, startingField) {
var fillFields = inputs.slice(startingField);
for (var i = 0, len = fillFields.length;i < len; i++) {
fillFields[i].value = code.slice(i * 4, i * 4 + 4);
}
}
推荐答案
尝试找到一种从pasteEvent获取文本的方法,最后找到它: JavaScript在粘贴事件上获取剪贴板数据(跨浏览器)
所以最后,我可以实现你想要做的。
Try to find a way to get text from pasteEvent, and finally found it: JavaScript get clipboard data on paste event (Cross browser) So Finally, I can achieve what you want to do.
function bind() {
var inputs = [];
inputs[0] = document.getElementById("id1");
inputs[1] = document.getElementById("id2");
inputs[2] = document.getElementById("id3");
inputs[3] = document.getElementById("id4");
function paste(e) {
// Prevent the real paste to change the input value.
e.preventDefault();
var pastedText;
// Get text from paste event.
if(window.clipboardData && window.clipboardData.getData ) {
pastedText = window.clipboardData.getData('Text');
} else if( e.clipboardData && e.clipboardData.getData ){
pastedText = e.clipboardData.getData('text/plain');
}
// Start to fill text from left to right.
var i, len, str, startPlace = false;
for(i = 0, len = inputs.length ; i < len && pastedText.length > 0 ; ++i) {
// SKip input before selected one.
if (this === inputs[i]) { // The current focused input
startPlace = true;
var lengthRemain = 4 - this.value.length;
str = pastedText.slice(0, lengthRemain);
inputs[i].value += str;
pastedText = pastedText.slice(lengthRemain);
} else if (startPlace) {
// Cut a string from pastedStr, at most 4 char.
str = pastedText.slice(0, 4);
inputs[i].value = str;
// Cut the fron 4 char from pastedStr.
pastedText = pastedText.slice(4);
}
}
return false;
}
// Add EventListener, paste event will be a input param.
var i, len;
for (i = 0, len = inputs.length; i < len; ++i) {
inputs[i].addEventListener("paste", paste);
}
}
// Bind
bind();
<td><input type="text" id="id1" maxlength="4" size="4" /></td>
<td><input type="text" id="id2" maxlength="4" size="4" /></td>
<td><input type="text" id="id3" maxlength="4" size="4" /></td>
<td><input type="text" id="id4" maxlength="4" size="4" /></td>
请检查它是否符合要求。
Please check if its what you want.
这篇关于应将每个文本框值的Javascript onpaste事件拆分并粘贴到相应的文本框中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!