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

Question

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);
        }
}

He wants the `1234ABC984IK4H2J` to be split, so 4 characters in each textbox, when pasting the full string into one of the textboxes. — TheOnlyError, Jun 19 '15 at 15:36
Do you use a static string? Or should it work for every 16 character string? — TheOnlyError, Jun 19 '15 at 15:52
No, there is no static string, value is dynamic it can be 12,14 or 16 digits — Nitin Divate, Jun 22 '15 at 08:28

score 0 · Accepted Answer · edited May 23 '17 at 11:51

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.

thanks for the answer but if my string is 1234ABC984IK4H2J and if i copy only ABC984IK4H2J and paste in second or third TextBox still it starts to paste from first text box which is incorrect. — Nitin Divate, Jun 22 '15 at 08:13
Oops, I first thought it would be more convenient to put the paste words from first to last no matter which input is selected. Now I changed to what you expect, have a test? — fuyushimoya, Jun 22 '15 at 08:39
thanks fuyushimoya you're Genius now the last case 1234ABC984IK4H2J text got divided in four text field 1234 ABC9 84IK 4H2J if user enter 123 in first text box and paste remaining in first text box itself 4ABC984IK4H2J then the output should be 1234 ABC9 84IK 4H2J and same applies for remaining text box also 1234 AB and pasted remaining text C984IK4H2J then output should be 1234 ABC9 84IK 4H2J — Nitin Divate, Jun 22 '15 at 10:56
As I'm gonna out for a while, I want to ask that, if use put `123` in first, and paste `ABC984IK4H2J`, then The 4 input would be `123 ABC9 84IK 4H2J ` right? — fuyushimoya, Jun 22 '15 at 11:29
Anyway, the requirement can be achieved by edit the logic when the for loop met the selected input, I've changed it, please take a look. — fuyushimoya, Jun 22 '15 at 11:36

score 0 · Answer 2 · answered May 14 '18 at 13:48

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

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 event of everytext box value should be split and paste in corresponding textbox

2 Answers2

Linked