123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- // 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');
- })();
|