Question

我正在做一个自己的jquery插件。看看这段代码：

<!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;">Required</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>

我的插件接受参数，如输入文件中的“min”“max”和“step”，如html5，但我的问题是我的插件在Internet Explorer中工作正常但在Firefox / Chrome中没有。此代码获取IE中“min”和“max”等变量的值但不是chrome中的变量，因此我无法定义类型=“数字”输入字段（如html5）的最小值和最大值。请帮忙。

Answer 1

只是在黑暗中拍摄 - 我相信使用e.target可能是特定于浏览器的，您可能想尝试使用e.srcElement。

jquery代码在IE中工作，但不在Firefox / Chrome中。

1 个答案: