Переопределить функцию jQuery .val ()?

Question

Есть ли способ легко переопределить функцию jQuery val()?

Причина, по которой я хочу переопределить это, заключается в том, что я хочу добавлять некоторую обработку каждый раз, когда для элемента устанавливается значение. И я не хочу делать другой пользовательский установщик значений, такой как myVal().

Answer 1

Вы можете сохранить ссылку на исходную функцию val, затем переопределить ее и выполнить обработку, а затем вызвать ее с помощью call, чтобы использовать правильный контекст:

(function ($) {
  var originalVal = $.fn.val;
  $.fn.val = function(value) {
    if (typeof value != 'undefined') {
      // setter invoked, do processing
    }
    return originalVal.call(this, value);
  };
})(jQuery);

Обратите внимание, что вы можете различить вызов геттера $(selector).val(); и вызов сеттера $(selector).val('new value');, просто проверив, является ли аргумент value undefined или нет.

Answer 2

Я знаю, что это старая тема, но она первая в поиске Google, и ответ не совсем правильный ...

Например, если вы попытаетесь в консоли $('#myinput').val(), вы должны получить значение #myinput.

Но если вы сделаете $('#myinput').val(undefined), вам следует установить значение #myinput! (С текущим ответом и его комментариями вы не установите значение #myinput)

Вот обновленный ответ, который использует arguments.

(function ($) {
  var originalVal = $.fn.val;
  $.fn.val = function(value) {
    if (arguments.length >= 1) {
      // setter invoked, do processing
      return originalVal.call(this, value); 
    }
    //getter invoked do processing
    return originalVal.call(this);
  };
})(jQuery);

, если вы хотите передать все аргументы, которые вы также можете использовать, примените

(function ($) {
  var originalVal = $.fn.val;
  $.fn.val = function(value) {
    if (arguments.length >= 1) {
      // setter invoked, do processing
    } else {
      //getter invoked do processing
    }
    return originalVal.apply(this, arguments);
  };
})(jQuery);

Надеюсь, это поможет!

Answer 3

Я знаю, что проблема старая, но чтобы дать полное решение. Чтобы jQuery.val () и jQuery.val (value) работали после переопределения, вам нужно переопределить его правильно и отдельно. Потому что при вызове jQuery.val () тогда originalVal.call (this, value); не будет работать правильно.

Чтобы сделать это правильно, вам нужно сделать что-то подобное при получении значения: originalVal.call (это);

Вот сайт, где все объясняется: http://extremedev.blogspot.com/2012/01/override-jqueryval-and-jqueryvalvalue.html

С уважением, Roman

Answer 4

С помощью этого кода вы можете переопределить «get» и «set» для .val() для определенных элементов:

(function () {

    var __val = $.fn.val;
    $.fn.val = function (value) {
        if (this[0] && (this[0].$val_get || this[0].$val_set)) {
            if (arguments.length === 0) return this[0].$val_get();
            else return this[0].$val_set(value) || this;
        }
        return __val.apply(this, arguments);
    };

})();

Теперь вам нужно создать два свойства функции для элемента DOM - $val_get и $val_set:

<input type="text" id="myInput" />
<input type="text" id="someOtherInput" />

<script>

    $('#myInput')[0].$val_get = function () {
        console.log('Got value from myInput!');
        return this.value;
    };

    $('#myInput')[0].$val_set = function (value) {
        console.log('Set value of myInput!');
         this.value = value;
    }

    //----

    $('#myInput').val('Hello!'); //Console: "Got value from myInput!"
    $('#myInput').val(); //Hello! | Console: "Set value to myInput!"

    $('#someOtherInput').val('Hello!'); //Console: ""
    $('#someOtherInput').val(); //Hello! | Console: ""

</script>

Это полезно для создания компонентов, которые управляют несколькими элементами управления.

JsFiddle: https://jsfiddle.net/oj4gt2ye/6/

Answer 5

Если я вас правильно понимаю, что-то вроде этого должно хорошо сработать:

jQuery.fn.val = function (new_val) {
    alert("You set a val! How wonderful!");
    this.value = new_val;
};

Просто убедитесь, что вы включили обычную функциональность: получение значений выбора и так далее. Просто вставьте этот код после после обычной библиотеки jQuery.

Answer 6

У меня есть что добавить в ответ CMS, моя реализация будет отличаться и будет выглядеть так:

(function ($) { var fnVal = $.fn.val;
    $.fn.val = function(value) {
        if (typeof value == 'undefined') {
            return fnVal.call(this);
        }
        var result = fnVal.call(this, value);
        $.fn.change.call(this);
        // here you can add some more implementation
        return result;
    };
})(jQuery);

обратите внимание на $. Fn.change.call (this); будет вызываться перед выходом из функции val (''), это также вызовет .change () для каждого val ('') назначение.