div - ¿Desea anular la función.val() de jQuery?

set text jquery

Question

¿Hay alguna manera de anular fácilmente la función val() jQuery?

La razón por la que quiero anularlo es que quiero agregar algo de procesamiento cada vez que se establece un valor para un elemento. Y no quiero hacer otro configurador de valores personalizado, como myVal() .

Answer 1

Con este código puede anular "get" y "set" de .val() para elementos específicos:

(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);
};
})();

Ahora tiene que crear dos propiedades de función en el elemento DOM: $val_get y $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>

Esto es útil para crear componentes que organizan múltiples controles.

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

Answer 2

Puede almacenar una referencia a la función val original, luego anularla y hacer su procesamiento, y luego invocarla con call , para usar el contexto correcto:

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

Tenga en cuenta que puede distinguir entre una llamada captadora $(selector).val(); y un setter call $(selector).val(''new value''); simplemente comprobando si el argumento del value undefined está undefined o no.

Answer 3

Sé que el problema es viejo pero solo para dar una solución completa. Para que tanto el jQuery.val () como el jQuery.val (valor) funcionen después de anularlo, debe reemplazarlo correctamente y por separado. Porque cuando se llama a jQuery.val () entonces originalVal.call (this, value); no funcionará correctamente

Para hacerlo de forma correcta, debe hacer algo así al obtener el valor: originalVal.call (this);

Aquí hay un sitio donde se explica todo: http://extremedev.blogspot.com/2012/01/override-jqueryval-and-jqueryvalvalue.html

Saludos romana

Answer 4

Sé que es un tema antiguo, pero es el primero en la búsqueda de Google y la respuesta no es del todo correcta ...

Por ejemplo, si intentas en la consola $(''#myinput'').val() deberías obtener el valor de #myinput.

Pero si haces $(''#myinput'').val(undefined) debes establecer el valor de #myinput ((Con la respuesta actual y los comentarios de la misma, no establecerás el valor de #myinput)

Aquí hay una respuesta actualizada que usa 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);

Si quieres pasar todos los argumentos también puedes usar aplicar.

(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);

Espero que te ayude!

Answer 5

Si te estoy entendiendo bien, algo como esto debería hacer el truco bien:

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

Solo asegúrese de incluir la funcionalidad regular: obtener valores de selecciones y así sucesivamente. Simplemente pegue ese código después de la biblioteca jQuery regular.

Answer 6

Tengo algo que agregar a la respuesta de CMS, mi implementación sería diferente y sería así:

(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);

observe el $ .fn.change.call (this); se llamará antes de salir de la función val (''''), esto activará también el .change () en cada asignación val ('''').