glenngv
04-12-2005, 08:17 AM
Inspired by this thread (http://www.codingforums.com/showthread.php?t=56367).
<html>
<head>
<title>Paste Splitter v1.0</title>
<style type="text/css">
body, input {
font: normal 12px Verdana;
}
</style>
<script type="text/javascript">
/************************
Paste Splitter v1.0
Glenn G. Vergara
glenngv@yahoo.com
Philippines
NOTE:
Please make this intact
if you want to use this
script. Thanks.
*************************/
function PasteSplitter(origMaxlen){ //you can also pass as many field references as needed in the argument
var me = this;
var arglen = arguments.length;
this.flds = new Array();
this.maxlen = origMaxlen;
this.filter = this.NUMERIC; //default filter
for (var i=1; i<arglen; i++){
this.flds[i-1] = arguments[i];
}
if (this.flds.length > 0){
var fld1 = this.flds[0];
fld1.onkeydown = function(event){
extendMaxLength(me.flds, me.maxlen, event);
}
fld1.onkeyup = function(event){
splitPaste(me.flds, me.maxlen, event)
}
if (typeof fld1.onbeforepaste != "undefined"){
fld1.onbeforepaste = function(event){
extendMaxLength(me.flds, me.maxlen, event);
}
}
if (typeof fld1.onpaste != "undefined"){
fld1.onpaste = function(event){
//we need a little delay here before calling the function
setTimeout(function(){
splitPaste(me.flds, me.maxlen, event);
}, 10);
}
}
}
function extendMaxLength(arrFlds, maxlen1, evt){
if (!evt) evt = event;
if (evt.ctrlKey || evt.type=="beforepaste"){
var len = maxlen1;
var arrlen = arrFlds.length;
for (var i=1; i<arrlen; i++){
len += arrFlds[i].maxLength;
}
arrFlds[0].maxLength = len + arrlen - 1; //allow separators in beetween sets (e.g. - . /)
}
}
function splitPaste(arrFlds, maxlen1, evt){
var s = arrFlds[0].value;
//apply filter
switch (me.filter){
case me.NUMERIC:
s = s.replace(/\D/g, "");
break;
case me.ALPHANUMERIC:
s = s.replace(/\W/g, "");
break;
case me.ALPHA:
s = s.replace(/[^a-zA-Z]/g, "");
break;
default: //custom filter
s = s.replace(me.filter, "");
}
var len = s.length;
if (len <= maxlen1){
arrFlds[0].value = s;
if (arrFlds.length > 1 && len==maxlen1){
arrFlds[1].focus();
}
return;
}
else {
var len=0, start=0, arrlen=arrFlds.length, el;
for (var i=0; i<arrlen; i++){
el = arrFlds[i];
len = (i>0) ? el.maxLength:maxlen1;
el.value = s.substr(start, len);
if (el.value=="" || el.value.length < len){
el.focus();
el.value = el.value; //this trick puts cursor at the end of value after focusing on the field first
return;
}
start += len;
}
}
arrFlds[0].maxLength = maxlen1; //change back to original maxlength
}
}
//filters
PasteSplitter.prototype.NUMERIC = 1;
PasteSplitter.prototype.ALPHANUMERIC = 2;
PasteSplitter.prototype.ALPHA = 3;
PasteSplitter.prototype.setFilter = function(filter){ //custom filter (regexp) may be specified
this.filter = filter;
}
/***************end of script******************/
//SAMPLE USAGE
function init(){
var f = document.forms[0];
//serial number
var ser = new PasteSplitter(f.ser1.maxLength, f.ser1, f.ser2, f.ser3); //pass the original maxlength of the first field and all the references of as many fields as needed
ser.setFilter(ser.ALPHANUMERIC); //set filter to alpha-numeric
//sss number
var sss = new PasteSplitter(f.sss1.maxLength, f.sss1, f.sss2, f.sss3, f.sss4); //default filter (numeric) will be used
}
window.onload = init;
//END OF SAMPLE USAGE
</script>
</head>
<body>
<form>
<h1>Paste Splitter v1.0</h1>
<p>Copy any alpha, numeric or alphanumeric characters, even including separators such as slash (/), hyphen (-), dot (.) or anything, and then paste it in the first field. The characters will be split to all the fields automatically excluding the separator. Very useful for fields like serial number, Social Security number, telephone number and the like. The script works on the basis of the <code>maxlength</code> attribute of the field. It degrades well for JavaScript-disabled browsers, making the <code>maxlength</code> attribute untouched. It works well for IE for all paste commands (<code>CTRL+V</code>, <code>Edit->Paste</code>, <code>right-click->Paste</code>) and partially works for Firefox (<code>CTRL+V</code> only).</p>
<fieldset>
<legend>Information</legend>
<label for="ser1">Serial No.</label> <input type="text" maxlength="5" size="5" id="ser1" name="ser1" /> - <input type="text" maxlength="4" size="4" id="ser2" name="ser2" /> - <input type="text" maxlength="6" size="6" id="ser3" name="ser3" /><br />
<label for="sss1">SSS No.</label> <input type="text" maxlength="2" size="2" id="sss1" name="sss1" /> - <input type="text" maxlength="7" size="7" id="sss2" name="sss2" /> - <input type="text" maxlength="2" size="2" id="sss3" name="sss3" /> - <input type="text" maxlength="1" size="1" id="sss4" name="sss4" />
</fieldset>
</form>
</body>
</html>
If you have any comments, suggestion, bugs found, please feel free to post them here.
<html>
<head>
<title>Paste Splitter v1.0</title>
<style type="text/css">
body, input {
font: normal 12px Verdana;
}
</style>
<script type="text/javascript">
/************************
Paste Splitter v1.0
Glenn G. Vergara
glenngv@yahoo.com
Philippines
NOTE:
Please make this intact
if you want to use this
script. Thanks.
*************************/
function PasteSplitter(origMaxlen){ //you can also pass as many field references as needed in the argument
var me = this;
var arglen = arguments.length;
this.flds = new Array();
this.maxlen = origMaxlen;
this.filter = this.NUMERIC; //default filter
for (var i=1; i<arglen; i++){
this.flds[i-1] = arguments[i];
}
if (this.flds.length > 0){
var fld1 = this.flds[0];
fld1.onkeydown = function(event){
extendMaxLength(me.flds, me.maxlen, event);
}
fld1.onkeyup = function(event){
splitPaste(me.flds, me.maxlen, event)
}
if (typeof fld1.onbeforepaste != "undefined"){
fld1.onbeforepaste = function(event){
extendMaxLength(me.flds, me.maxlen, event);
}
}
if (typeof fld1.onpaste != "undefined"){
fld1.onpaste = function(event){
//we need a little delay here before calling the function
setTimeout(function(){
splitPaste(me.flds, me.maxlen, event);
}, 10);
}
}
}
function extendMaxLength(arrFlds, maxlen1, evt){
if (!evt) evt = event;
if (evt.ctrlKey || evt.type=="beforepaste"){
var len = maxlen1;
var arrlen = arrFlds.length;
for (var i=1; i<arrlen; i++){
len += arrFlds[i].maxLength;
}
arrFlds[0].maxLength = len + arrlen - 1; //allow separators in beetween sets (e.g. - . /)
}
}
function splitPaste(arrFlds, maxlen1, evt){
var s = arrFlds[0].value;
//apply filter
switch (me.filter){
case me.NUMERIC:
s = s.replace(/\D/g, "");
break;
case me.ALPHANUMERIC:
s = s.replace(/\W/g, "");
break;
case me.ALPHA:
s = s.replace(/[^a-zA-Z]/g, "");
break;
default: //custom filter
s = s.replace(me.filter, "");
}
var len = s.length;
if (len <= maxlen1){
arrFlds[0].value = s;
if (arrFlds.length > 1 && len==maxlen1){
arrFlds[1].focus();
}
return;
}
else {
var len=0, start=0, arrlen=arrFlds.length, el;
for (var i=0; i<arrlen; i++){
el = arrFlds[i];
len = (i>0) ? el.maxLength:maxlen1;
el.value = s.substr(start, len);
if (el.value=="" || el.value.length < len){
el.focus();
el.value = el.value; //this trick puts cursor at the end of value after focusing on the field first
return;
}
start += len;
}
}
arrFlds[0].maxLength = maxlen1; //change back to original maxlength
}
}
//filters
PasteSplitter.prototype.NUMERIC = 1;
PasteSplitter.prototype.ALPHANUMERIC = 2;
PasteSplitter.prototype.ALPHA = 3;
PasteSplitter.prototype.setFilter = function(filter){ //custom filter (regexp) may be specified
this.filter = filter;
}
/***************end of script******************/
//SAMPLE USAGE
function init(){
var f = document.forms[0];
//serial number
var ser = new PasteSplitter(f.ser1.maxLength, f.ser1, f.ser2, f.ser3); //pass the original maxlength of the first field and all the references of as many fields as needed
ser.setFilter(ser.ALPHANUMERIC); //set filter to alpha-numeric
//sss number
var sss = new PasteSplitter(f.sss1.maxLength, f.sss1, f.sss2, f.sss3, f.sss4); //default filter (numeric) will be used
}
window.onload = init;
//END OF SAMPLE USAGE
</script>
</head>
<body>
<form>
<h1>Paste Splitter v1.0</h1>
<p>Copy any alpha, numeric or alphanumeric characters, even including separators such as slash (/), hyphen (-), dot (.) or anything, and then paste it in the first field. The characters will be split to all the fields automatically excluding the separator. Very useful for fields like serial number, Social Security number, telephone number and the like. The script works on the basis of the <code>maxlength</code> attribute of the field. It degrades well for JavaScript-disabled browsers, making the <code>maxlength</code> attribute untouched. It works well for IE for all paste commands (<code>CTRL+V</code>, <code>Edit->Paste</code>, <code>right-click->Paste</code>) and partially works for Firefox (<code>CTRL+V</code> only).</p>
<fieldset>
<legend>Information</legend>
<label for="ser1">Serial No.</label> <input type="text" maxlength="5" size="5" id="ser1" name="ser1" /> - <input type="text" maxlength="4" size="4" id="ser2" name="ser2" /> - <input type="text" maxlength="6" size="6" id="ser3" name="ser3" /><br />
<label for="sss1">SSS No.</label> <input type="text" maxlength="2" size="2" id="sss1" name="sss1" /> - <input type="text" maxlength="7" size="7" id="sss2" name="sss2" /> - <input type="text" maxlength="2" size="2" id="sss3" name="sss3" /> - <input type="text" maxlength="1" size="1" id="sss4" name="sss4" />
</fieldset>
</form>
</body>
</html>
If you have any comments, suggestion, bugs found, please feel free to post them here.