Question

我想知道是否可以使用JQuery BlockUI插件直接禁用输入字段。

我在jquery插件上看到了示例。

http://jquery.malsup.com/block/#element

当我在jquery选择器中仅提供输入字段id时，它不起作用。

$(document).ready(function() { 

    $('#blockButton').click(function() { 
        $('#inputId').block({ message: null }); 
    })

当我只提供输入字段ID时，它不起作用，但是如果我给锚标记id或div标记id它正常工作。

是否存在阻止输入字段（文本，选择等）的解决方案。

请告诉我。

Answer 1

您可以将输入设置为只读而不是尝试阻止：

$('#inputId').attr('readonly', 'readonly');

或

$('#inputId').prop('readonly', true);

Answer 2

我编写了一对包装函数来调用BlockUI的block（）函数。我写它们有两个原因：1。设置一些默认选项，2。防止元素被多次阻止。

我遇到了和你一样的问题，当IE尝试阻止INPUT元素时会抛出异常。我修改了我的块函数来检查被阻止的元素是否是INPUT，如果是，它会禁用INPUT并阻塞INPUT的父代。您需要将输入包装在DIV中（充当父级），以便只阻止UI的一小部分。

// Wrapper function for the BlockUI Plugin http://jquery.malsup.com/block/
// This function blocks an element.
// @param {String, Object} element - Reference to the element to block, either the selector string, or the jQuery object itself
// @param {Object} options - a hash of options to pass to the block() call
function blockElement(element, options) {

    if (typeof element == 'string') {
        element = $(element);
    }

    if (element.length > 0) {
        if (typeof options == 'undefined') {
            options = {};
        }        

        initHash(options,
            { message: 'Please Wait',
                css: { width: '20%', padding: '3px' },
                overlayCSS: {},
                cursor: 'wait'
            }
        );

        initHash(options.css, { cursor: options.cursor });
        initHash(options.overlayCSS, { cursor: options.cursor });

        var blockOptions = {
            message: options.message,
            css: options.css,
            overlayCSS: options.overlayCSS,
            fadeIn: 0
        }

        if (!$.support.leadingWhitespace) {
            // disable fading in IE browsers less than IE9, it's slow to animate
            blockOptions.fadeIn = 0;
        }

        // if an element is already blocked, do not try to block it again
        var isBlocked = element.attr('data-isBlocked');
        if (isBlocked != 'true') {
            element.attr('data-isBlocked', true);
            // do not try to block input elements, it breaks in IE
            // instead disable the input and block it's parent
            if (element.is('input')) {
                element.parent().block(options);
                element.attr('disabled', 'disabled');
            } else {
                element.block(blockOptions);
            }

        }
    }
}

// Unblocks an element that was blocked using blockElement()
// @param {String, Object} element - Reference to the element to block, either the selector string, or the jQuery object itself
function unblockElement(element) {
    if (typeof element == 'string') {
        element = $(element);
    }

    var options = {};
    if (!$.support.leadingWhitespace) {
        // disable fading in IE browsers less than IE9
        options.fadeOut = 0;
    }

    if (element.length > 0) {
        element.attr('data-isBlocked', false);
        if (element.is('input')) {
            element.removeAttr('disabled');
            element.parent().unblock(options);
        } else {
            element.unblock(options);
        }
    }
}


// initalize a hash/map/associative-array with default values
// if the keys already exist, then they are left alone
// @param: {Object} targetHash - the hash that is going to be initalized
// @param: {Object} defaults - a hash containing the default values that should be added to targetHash
// @usage: initHash(targetHash, {a:1,b:2,c:3});
function initHash(targetHash, defaults) {
    $.each(defaults, function (index, value) {
        if (!(index in targetHash)) {
            targetHash[index] = value;
        } else {
            if (targetHash[index] == null || targetHash[index] == undefined) {
                targetHash[index] = value;
            }
        }

    });
}

Jquery BlockUI插件 - 阻塞输入字段

2 个答案: