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
Post a Comment