Плагин Jquery BlockUI - блокировка поля ввода

Question

Хотелось бы узнать, можно ли использовать плагин JQuery BlockUI для непосредственного отключения поля ввода.

Я вижу примеры на плагине jquery.

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

когда я даю только идентификатор поля ввода в селекторе jquery, он не работает.

$(document).ready(function() { 

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

, когда я просто даю идентификатор поля ввода, он не работает, но вместо этого, если я даю идентификатор тега привязки или тега div, он работает нормально.

есть ли решение длязаблокируйте только поля ввода (текст, выберите и т. д.).

пожалуйста, дайте мне знать.

Answer 1

Я написал пару функций-оболочек для вызова функции BlockUI block (). Я написал их по двум причинам: 1. Чтобы настроить некоторые параметры по умолчанию, 2. Чтобы предотвратить блокирование элементов более одного раза.

Я столкнулся с той же проблемой, что и вы, где IE выдает исключение при попытке заблокировать элемент INPUT. Я изменил свою функцию блокировки, чтобы проверить, является ли блокируемый элемент INPUT, и если это так, он отключает INPUT и вместо этого блокирует родителя INPUT. Вы захотите обернуть входные данные внутри DIV (выступать в роли родителя), чтобы заблокировать только небольшую часть вашего пользовательского интерфейса.

// 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

Вы можете просто установить вход только для чтения вместо попытки block it:

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

или

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