Javascript Onpaste Event Of Everytext Box Value Should Be Split And Paste In Corresponding Textbox

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

Solution 1:

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.

functionbind() {
  var inputs = [];
  inputs[0] = document.getElementById("id1");
  inputs[1] = document.getElementById("id2");
  inputs[2] = document.getElementById("id3");
  inputs[3] = document.getElementById("id4");
  
  functionpaste(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');
    }  elseif( 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); 
        } elseif (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); 
        }        
      }
    returnfalse;
    }
    
  // 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);
  }
}
// Bindbind();

<td><inputtype="text"id="id1"maxlength="4"size="4" /></td><td><inputtype="text"id="id2"maxlength="4"size="4" /></td><td><inputtype="text"id="id3"maxlength="4"size="4" /></td><td><inputtype="text"id="id4"maxlength="4"size="4" /></td>

Please check if its what you want.

Solution 2:

how to do it from the gap between the figures should be followed.

functionbind() {
  var inputs = [];
  inputs[0] = document.getElementById("id1");
  inputs[1] = document.getElementById("id2");
  inputs[2] = document.getElementById("id3");
  inputs[3] = document.getElementById("id4");
  
  functionpaste(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');
    }  elseif( 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); 
        } elseif (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); 
        }        
      }
    returnfalse;
    }
    
  // 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);
  }
}
// Bindbind();

<td><inputtype="text"id="id1"maxlength="4"size="4" /></td><td><inputtype="text"id="id2"maxlength="4"size="4" /></td><td><inputtype="text"id="id3"maxlength="4"size="4" /></td><td><inputtype="text"id="id4"maxlength="4"size="4" /></td>