60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
// 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);
|
|
|
|
// 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);
|
|
|
|
// 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);
|
|
|
|
function setCaret(input, pos){
|
|
if( !input ) return;
|
|
if (input.setSelectionRange){
|
|
input.focus();
|
|
input.setSelectionRange(pos, pos);
|
|
}
|
|
else if( input.createTextRange ){
|
|
var range = input.createTextRange();
|
|
range.collapse(true);
|
|
range.moveEnd('character', pos);
|
|
range.moveStart('character', pos);
|
|
range.select();
|
|
}
|
|
}
|
|
|
|
combine.apply(this);
|
|
};
|
|
// After each 'change' event of any of the fields, combine all the values to the hidden input.
|
|
function combine(){
|
|
var hidden = $(this).siblings('input[type=hidden]').val('')[0];
|
|
$(this.parentNode).find(':text').each( function(){
|
|
hidden.value += this.value;
|
|
});
|
|
}
|
|
|
|
$('div.multi').on({'keydown.multifeild':funnel, 'keypress.multifeild':funnel, 'change.multifeild':combine}, 'input');
|
|
})(); |