Jquery BlockUI 插件 - 阻止输入字段

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

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

我遇到了与您相同的问题，即 IE 在尝试阻止 INPUT 元素时引发异常。我修改了我的 block 函数来检查被阻塞的元素是否是 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;
            }
        }

    });
}

Answer 2

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

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

或

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