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


strictly no jquery please
have text 1234abc984ik4h2j , have 4 text box onpaste need text split , copied in remaining text box purely in javascript no jquery application doesn't support jquery , ie>8 functions no function supports 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");     (var = 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 code fill remaining text boxs function completetextfields(code, startingfield) {     var fillfields = inputs.slice(startingfield);         (var = 0, len = fillfields.length;i < len; i++) {             fillfields[i].value = code.slice(i * 4, * 4 + 4);         } } 

try find way text pasteevent, , found it: javascript clipboard data on paste event (cross browser) finally, can achieve want 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 real paste change input value.      e.preventdefault();      var pastedtext;      // text 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 fill text left right.      var i, len, str, startplace = false;        for(i = 0, len = inputs.length ; < len && pastedtext.length > 0 ; ++i) {          // skip input before selected one.          if (this === inputs[i]) { // 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 string pastedstr, @ 4 char.           str = pastedtext.slice(0, 4);           inputs[i].value = str;           // cut fron 4 char pastedstr.           pastedtext = pastedtext.slice(4);           }                }      return false;      }          // add eventlistener, paste event input param.    var i, len;    (i = 0, len = inputs.length; < 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 want.


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -