2016-06-07 15:58:13 +00:00
// multifield - connects several input fields to each-other
// By Yair Even Or / 2011 / dropthebit.com
; ( function ( ) {
var fixedEvent = 0 ;
function funnel ( e ) {
fixedEvent ++ ;
var that = this ;
setTimeout ( function ( ) {
keypress . call ( that , e ) ;
fixedEvent = 0 ;
} , 0 ) ;
}
function keypress ( e ) {
var nextPrevField ,
sel = [ this . selectionStart , this . selectionEnd ] ;
if ( ! e . charCode && e . keyCode != 37 && e . keyCode != 39 && e . keyCode != 8 )
return ;
// if hit Backspace key when caret was at the beginning, or if the 'left' arrow key was pressed and the caret was at the start -> go back to previous field
if ( ( e . keyCode == 8 && sel [ 1 ] == 0 ) || ( e . keyCode == 37 && sel [ 1 ] == 0 ) )
setCaret ( $ ( this ) . prev ( ':text' ) [ 0 ] , 100 ) ;
2016-04-24 14:26:11 +00:00
2016-06-07 15:58:13 +00:00
// if the 'right' arrow key was pressed and caret was at the end -> advance to the next field
else if ( e . keyCode == 39 && sel [ 1 ] == this . value . length )
setCaret ( $ ( this ) . next ( ':text' ) [ 0 ] , 0 ) ;
2016-04-24 14:26:11 +00:00
2016-06-07 15:58:13 +00:00
// automatically move to the next field once user has filled the current one completely
else if ( e . charCode && sel [ 1 ] == sel [ 0 ] && sel [ 0 ] == this . maxLength )
setCaret ( $ ( this ) . next ( ':text' ) [ 0 ] , 100 ) ;
2016-04-24 14:26:11 +00:00
function setCaret ( input , pos ) {
2016-06-07 15:58:13 +00:00
if ( ! input ) return ;
if ( input . setSelectionRange ) {
2016-04-24 14:26:11 +00:00
input . focus ( ) ;
input . setSelectionRange ( pos , pos ) ;
2016-06-07 15:58:13 +00:00
}
else if ( input . createTextRange ) {
2016-04-24 14:26:11 +00:00
var range = input . createTextRange ( ) ;
range . collapse ( true ) ;
range . moveEnd ( 'character' , pos ) ;
range . moveStart ( 'character' , pos ) ;
range . select ( ) ;
}
}
2016-06-07 15:58:13 +00:00
combine . apply ( this ) ;
} ;
2016-04-24 14:26:11 +00:00
// After each 'change' event of any of the fields, combine all the values to the hidden input.
2016-06-07 15:58:13 +00:00
function combine ( ) {
var hidden = $ ( this ) . siblings ( 'input[type=hidden]' ) . val ( '' ) [ 0 ] ;
$ ( this . parentNode ) . find ( ':text' ) . each ( function ( ) {
hidden . value += this . value ;
} ) ;
2016-04-24 14:26:11 +00:00
}
2016-06-07 15:58:13 +00:00
$ ( 'div.multi' ) . on ( { 'keydown.multifeild' : funnel , 'keypress.multifeild' : funnel , 'change.multifeild' : combine } , 'input' ) ;
} ) ( ) ;