Javascript 每个文本框值的 onpaste 事件应该被拆分并粘贴到相应的文本框中

Question

请绝对不要jQuery。
我有文本 1234ABC984IK4H2J 和四个文本框 onpaste 我需要拆分和复制文本在剩余的文本框中。纯粹在 Javascript 中没有 jQuery 因为我的应用程序不支持 jQuery 和 IE>8 功能，所以没有函数支持 querySelectorAll 和 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);
        }
}

Answer 1

想办法从pasteEvent中获取文本，终于找到了：JavaScript get clipboard data on paste event (Cross browser) 所以终于可以实现你想要的了

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>

请检查是否是您想要的。

Answer 2

如何从数字之间的差距做到这一点应该遵循。

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>

Javascript 每个文本框值的 onpaste 事件应该被拆分并粘贴到相应的文本框中

Javascript onpaste event of everytext box value should be split and paste in corresponding textbox

javascript

dom-events