javascript 弹出新窗口,input格式化输入

来源:互联网 发布:中国移动宽带网络长春 编辑:程序博客网 时间:2024/05/21 06:36

javascript  弹出新窗口,input格式化输入(包括就水印watermarkinput,指定格式maskedinput)

---------------------------------------------------------maskedinput

/*
Masked Input plugin for jQuery
Version: 1.3
*/
(function($) {
    var pasteEventName = ($.browser.msie ? 'paste' : 'input') + ".mask";
    var iPhone = (window.orientation != undefined);


    $.mask = {
        //Predefined character definitions
        definitions: {
            '9': "[0-9]",
            'a': "[A-Za-z]",
            '*': "[A-Za-z0-9]"
        },
        dataName: "rawMaskFn"
    };


    $.fn.extend({
        //Helper Function for Caret positioning
        caret: function(begin, end) {
            if (this.length == 0) return;
            if (typeof begin == 'number') {
                end = (typeof end == 'number') ? end : begin;
                return this.each(function() {
                    if (this.setSelectionRange) {
                        this.setSelectionRange(begin, end);
                    } else if (this.createTextRange) {
                        var range = this.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', end);
                        range.moveStart('character', begin);
                        range.select();
                    }
                });
            } else {
                if (this[0].setSelectionRange) {
                    begin = this[0].selectionStart;
                    end = this[0].selectionEnd;
                } else if (document.selection && document.selection.createRange) {
                    var range = document.selection.createRange();
                    begin = 0 - range.duplicate().moveStart('character', -100000);
                    end = begin + range.text.length;
                }
                return { begin: begin, end: end };
            }
        },
        unmask: function() { return this.trigger("unmask"); },
        mask: function(mask, settings) {
            if (!mask && this.length > 0) {
                var input = $(this[0]);
                return input.data($.mask.dataName)();
            }
            settings = $.extend({
                placeholder: "_",
                completed: null
            }, settings);


            var defs = $.mask.definitions;
            var tests = [];
            var partialPosition = mask.length;
            var firstNonMaskPos = null;
            var len = mask.length;


            $.each(mask.split(""), function(i, c) {
                if (c == '?') {
                    len--;
                    partialPosition = i;
                } else if (defs[c]) {
                    tests.push(new RegExp(defs[c]));
                    if (firstNonMaskPos == null)
                        firstNonMaskPos = tests.length - 1;
                } else {
                    tests.push(null);
                }
            });


            return this.trigger("unmask").each(function() {
                var input = $(this);
                var buffer = $.map(mask.split(""), function(c, i) { if (c != '?') return defs[c] ? settings.placeholder : c });
                var focusText = input.val();


                function seekNext(pos) {
                    while (++pos <= len && !tests[pos]);
                    return pos;
                };
                function seekPrev(pos) {
                    while (--pos >= 0 && !tests[pos]);
                    return pos;
                };


                function shiftL(begin, end) {
                    if (begin < 0)
                        return;
                    for (var i = begin, j = seekNext(end); i < len; i++) {
                        if (tests[i]) {
                            if (j < len && tests[i].test(buffer[j])) {
                                buffer[i] = buffer[j];
                                buffer[j] = settings.placeholder;
                            } else
                                break;
                            j = seekNext(j);
                        }
                    }
                    writeBuffer();
                    input.caret(Math.max(firstNonMaskPos, begin));
                };


                function shiftR(pos) {
                    for (var i = pos, c = settings.placeholder; i < len; i++) {
                        if (tests[i]) {
                            var j = seekNext(i);
                            var t = buffer[i];
                            buffer[i] = c;
                            if (j < len && tests[j].test(t))
                                c = t;
                            else
                                break;
                        }
                    }
                };


                function keydownEvent(e) {
                    var k = e.which;


                    //backspace, delete, and escape get special treatment
                    if (k == 8 || k == 46 || (iPhone && k == 127)) {
                        var pos = input.caret(),
begin = pos.begin,
end = pos.end;


                        if (end - begin == 0) {
                            begin = k != 46 ? seekPrev(begin) : (end = seekNext(begin - 1));
                            end = k == 46 ? seekNext(end) : end;
                        }
                        clearBuffer(begin, end);
                        shiftL(begin, end - 1);


                        return false;
                    } else if (k == 27) {//escape
                        input.val(focusText);
                        input.caret(0, checkVal());
                        return false;
                    }
                };


                function keypressEvent(e) {
                    var k = e.which,
pos = input.caret();
                    if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {//Ignore
                        return true;
                    } else if (k) {
                        if (pos.end - pos.begin != 0) {
                            clearBuffer(pos.begin, pos.end);
                            shiftL(pos.begin, pos.end - 1);
                        }


                        var p = seekNext(pos.begin - 1);
                        if (p < len) {
                            var c = String.fromCharCode(k);
                            if (tests[p].test(c)) {
                                shiftR(p);
                                buffer[p] = c;
                                writeBuffer();
                                var next = seekNext(p);
                                input.caret(next);
                                if (settings.completed && next >= len)
                                    settings.completed.call(input);
                            }
                        }
                        return false;
                    }
                };


                function clearBuffer(start, end) {
                    for (var i = start; i < end && i < len; i++) {
                        if (tests[i])
                            buffer[i] = settings.placeholder;
                    }
                };


                function writeBuffer() { return input.val(buffer.join('')).val(); };


                function checkVal(allow) {
                    //try to place characters where they belong
                    var test = input.val();
                    var lastMatch = -1;
                    for (var i = 0, pos = 0; i < len; i++) {
                        if (tests[i]) {
                            buffer[i] = settings.placeholder;
                            while (pos++ < test.length) {
                                var c = test.charAt(pos - 1);
                                if (tests[i].test(c)) {
                                    buffer[i] = c;
                                    lastMatch = i;
                                    break;
                                }
                            }
                            if (pos > test.length)
                                break;
                        } else if (buffer[i] == test.charAt(pos) && i != partialPosition) {
                            pos++;
                            lastMatch = i;
                        }
                    }
                    if (!allow && lastMatch + 1 < partialPosition) {
                        input.val("");
                        clearBuffer(0, len);
                    } else if (allow || lastMatch + 1 >= partialPosition) {
                        writeBuffer();
                        if (!allow) input.val(input.val().substring(0, lastMatch + 1));
                    }
                    return (partialPosition ? i : firstNonMaskPos);
                };


                input.data($.mask.dataName, function() {
                    return $.map(buffer, function(c, i) {
                        return tests[i] && c != settings.placeholder ? c : null;
                    }).join('');
                })


                if (!input.attr("readonly"))
                    input
.one("unmask", function() {
    input
.unbind(".mask")
.removeData($.mask.dataName);
})
.bind("focus.mask", function() {
    focusText = input.val();
    var pos = checkVal();
    writeBuffer();
    var moveCaret = function() {
        if (pos == mask.length)
            input.caret(0, pos);
        else
            input.caret(pos);
    };
    ($.browser.msie ? moveCaret : function() { setTimeout(moveCaret, 0) })();
})
.bind("blur.mask", function() {
    checkVal();
    if (input.val() != focusText)
        input.change();
})
.bind("keydown.mask", keydownEvent)
.bind("keypress.mask", keypressEvent)
.bind(pasteEventName, function() {
    setTimeout(function() { input.caret(checkVal(true)); }, 0);
});

                checkVal(); //Perform initial check for existing values
            });
        }
    });
})(jQuery);
/*
具体控件
*/
jQuery(function($) {
$("#txt_maskinput").mask("99999-99-9999");

jQuery(function($) {
$("#txt_m").mask("99/99/9999", { placeholder: " " });
});
jQuery(function($) {
$("#txt").mask("99/99/9999", { completed: function() { alert("You typed the following: " + this.val()); } });
});


//Phone + Ext
jQuery(function($) {
$("#txt_A").mask("(999) 999-9999? x99999");
});

jQuery(function($) {
$("#txt_mask").mask("a*-999-a999");
});

});

---------------------------------------------------------maskedinput

---------------------------------------------------------watermarkinput



/*
* Version: Beta 1
* Release: 2007-06-01
*/
(function($) {
    var map = new Array();
    $.Watermark = {
        ShowAll: function() {
            for (var i = 0; i < map.length; i++) {
                if (map[i].obj.val() == "") {
                    map[i].obj.val(map[i].text);
                    map[i].obj.css("color", map[i].WatermarkColor);
                } else {
                    map[i].obj.css("color", map[i].DefaultColor);
                }
            }
        },
        HideAll: function() {
            for (var i = 0; i < map.length; i++) {
                if (map[i].obj.val() == map[i].text)
                    map[i].obj.val("");
            }
        }
    }


    $.fn.Watermark = function(text, color) {
        if (!color)
            color = "#aaa";
        return this.each(
function() {
    var input = $(this);
    var defaultColor = input.css("color");
    map[map.length] = { text: text, obj: input, DefaultColor: defaultColor, WatermarkColor: color };
    function clearMessage() {
        if (input.val() == text)
            input.val("");
        input.css("color", defaultColor);
    }


    function insertMessage() {
        if (input.val().length == 0 || input.val() == text) {
            input.val(text);
            input.css("color", color);
        } else
            input.css("color", defaultColor);
    }


    input.focus(clearMessage);
    input.blur(insertMessage);
    input.change(insertMessage);


    insertMessage();
}
);
    };
})(jQuery);


/*
具体控件
*/


jQuery(function($) {
$("#txt_mask").Watermark("First");  


});


/*
Optionally, if you are not satisfied with the default gray watermark color, 
you may pass a second argument to the watermark function.
*/


jQuery(function($) {
    $("#suffix").Watermark("Suffix", "#369");
});
/*
Finally, once you are ready to pull data from your watermarked input boxes,
you can clear all of the watermarks and then replace them after you are finished.
*/
function UseData() {
    $.Watermark.HideAll();
    //Do Stuff
    $.Watermark.ShowAll();
}

---------------------------------------------------------watermarkinput