jquery code working in IE but not Firefox/Chrome._问答_开发者

jquery code working in IE but not Firefox/Chrome.

开发者 https://www.devze.com 2023-03-23 19:34 出处：网络

i\'m doing a jquery plugin of my own. have a look at this code : <!DOCTYPE html> <html> <head>

i'm doing a jquery plugin of my own. have a look at this code :

<!DOCTYPE html>
<html>
<head>
    `<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>`
    <script type="text/javascript">
        // My plugin
        (function($) {
            $.html5 = {
                form: function() {
                    select = $('input');
                    $("input#number").after('<input type="button" id="step-up" value="U"><input type="button" id="step-down" value="D">');

                    $('input').bind('click', function(e){
                        if($(e.target).is("#step-up")){
                            $.html5.selector('min');
                            steps = parseInt(selector.attr('step'));
                            min = parseInt(selector.attr('min'));
                            max = parseInt(selector.attr('max'));
                            val = parseInt(selector.attr('value'));
                            if (val < max){
                                selector.val(val + steps);
                            }
                        }
                        if($(e.target).is("#step-down")){
                            $.html5.selector('min');
                            steps = parseInt(selector.attr('step'));
                            min = parseInt(selector.attr('min'));
                            max = parseInt(selector.attr('max'));
                            val = parseInt(selector.attr('value'));
                            if (val > min){
                                selector.val(val - steps);
                            }
                        }
                    });

                    increment = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
                    $.each(increment, function(index){
                        selector = $('input[placeholder]:eq(' + index + ')');
                        placeholder = selector.attr('placeholder');
                        selector.val(placeholder);
                    });

                    $(select).bind('focus', function(){
                        index = $(select).index(this);

                        // Placeholder
                        selector = $('input[placeholder]:eq(' + index + ')');
                        placeholder = selector.attr('placeholder');
                        if (selector.val() == placeholder)
                        {
                            selector.val('');
                        }

                        // Required
                        $('*').remove('.error');

                        //Min Max

                    });

                    $(select).bind('blur', function(){
                        index = $(select).index(this);

                        // Placeholder
                        selector = $('input[placeholder]:eq(' + index + ')');
                        placeholder = selector.attr('placeholder');
                        if (placeholder != selector.val() && selector.val() == '')
                        {
                            $(selector).val(placeholder);
                        }

                        // Required
                        $.html5.selector('required');
                        required = selector.attr('required');
                        if(required == 'required' && selector.val() == placeholder)
                        {
                            $(this + ':submit').attr('disabled','disabled');
                            $(this).after('<div class="error" style="border: 1px solid;">Requi开发者_JS百科red</div>');
                        }
                        else
                        {
                            $(this + ':submit').removeAttr('disabled');
                            $('*').remove('.error');
                        }

                        // Min Max
                        $.html5.selector('min');
                        min = selector.attr('min');
                        max = selector.attr('max');
                        val = parseInt(selector.val());
                        if(val > max) {
                            selector.val(max);
                        }
                        else if(val < min) {
                            selector.val(min);
                        }
                    });
                },
                selector: function(attr){
                    select = $('input');
                    attrib = $('input[' + attr + ']');
                    index = $(attrib).index(select);
                    selector = $('input[' + attr + ']:eq(' + index + ')');
                    return selector;
                }
            },
            form = function() {
                $.html5.form();
            }
        })(jQuery);

        // Call to my plugin
        $(document).ready( function() {
            form();
        });
    `</script>`
`</head>`
`<body>`
    `<form id="form" method="post" action="http://localhost/html5/">`
        `<input type="text" name="item" value="" placeholder="Enter text here." required="required" />`
        `<input type="number" name="number" min="5" max="10" step="1" value="" placeholder="Number here" id="number" />`
        `<input type="submit" value="Submit">`
    </form>
</body>
</html>

my plugin accept parameter such as "min" "max" and "step" in input fileds like html5 , but my problem is that my plugin is working fine in Internet Explorer but not in Firefox/Chrome. This code getting values of variables like "min" and "max" in IE but not in chrome thus i'm not able to define a minimum and maximum value of a type="number" input fields like html5 do. please help.

Just a shot in the dark - I believe that the use of e.target can be browser-specific, you may want to try using e.srcElement instead.