ejemplo - select onchange javascript

¿Cómo puedo enlazar al evento de cambio de un área de texto en jQuery?

Question

Quiero capturar si ha ocurrido algún cambio en <textarea> . Como escribir cualquier carácter (eliminar, retroceder) o hacer clic con el ratón y pegar o cortar. ¿Hay un evento jQuery que pueda desencadenar para todos esos eventos?

Intenté cambiar el evento, pero desencadena la devolución de llamada solo después de separar del componente.

Uso : Quiero habilitar un botón si un <textarea> contiene algún texto.

Answer 1

2018, sin JQUERY

La pregunta es con JQuery, es solo para tu información.

JS

let textareaID = document.getElementById(''textareaID'');
let yourBtnID = document.getElementById(''yourBtnID'');
textareaID.addEventListener(''input'', function() {
    yourBtnID.style.display = ''none'';
    if (textareaID.value.length) {
        yourBtnID.style.display = ''inline-block'';
    }
});

HTML

<textarea id="textareaID"></textarea>
<button id="yourBtnID" style="display: none;">click me</div>

Answer 2

Aquí hay otra versión (moderna) pero ligeramente diferente a las mencionadas anteriormente. Probado con IE9:

$(''#textareaID'').on(''input change keyup'', function () {
  if (this.value.length) {
    // textarea has content
  } else {
    // textarea is empty
  }
});

Para los navegadores desactualizados, también puede agregar selectionchange y propertychange (como se menciona en otras respuestas). Pero selectionchange no funcionó para mí en IE9. Es por eso que he añadido keyup .

Answer 3

Bienvenidos al año 2015 donde tenemos un nuevo evento de input .

var button = $("#buttonId");
$("#textareaID").on(''input'',function(e){
  if(e.target.value === ''''){
    // Textarea has no value
    button.hide();
  } else {
    // Textarea has a value
    button.show();
  }
});

Answer 4

Después de un poco de experimentación se me ocurrió esta implementación:

$(''.detect-change'')
    .on(''change cut paste'', function(e) {
        console.log("Change detected.");
        contentModified = true;
    })
    .keypress(function(e) {
        if (e.which !== 0 && e.altKey == false && e.ctrlKey == false && e.metaKey == false) {
            console.log("Change detected.");
            contentModified = true;
        }
    });

Maneja los cambios en cualquier tipo de entrada y selección, así como las áreas de texto que ignoran las teclas de flecha y cosas como ctrl, cmd, teclas de función, etc.

Nota: solo he intentado esto en FF ya que es para un complemento de FF.

Answer 5

Esta pregunta necesitaba una respuesta más actualizada, con fuentes. Esto es lo que realmente funciona (aunque no tienes que confiar en mi palabra):

// Storing this jQuery object outside of the event callback 
// prevents jQuery from having to search the DOM for it again
// every time an event is fired.
var $myButton = $("#buttonID")

// input           :: for all modern browsers [1]
// selectionchange :: for IE9 [2]
// propertychange  :: for <IE9 [3]
$(''#textareaID'').on(''input selectionchange propertychange'', function() {

  // This is the correct way to enable/disabled a button in jQuery [4]
  $myButton.prop(''disabled'', this.value.length === 0)

}

1: https://developer.mozilla.org/en-US/docs/Web/Events/input#Browser_compatibility
2: oninput en IE9 no se dispara cuando presionamos BACKSPACE / DEL / do CUT
3: https://msdn.microsoft.com/en-us/library/ms536956(v=vs.85).aspx
4: http://api.jquery.com/prop/#prop-propertyName-function

PERO, para una solución más global que pueda usar a lo largo de su proyecto , recomiendo usar el complemento jQuery de textchange para obtener un nuevo evento de textchange compatible con textchange navegadores. Fue desarrollado por la misma persona que implementó el evento onChange equivalente para onChange de Facebook, que utilizan para casi todo su sitio web. Y creo que es seguro decir que, si es una solución lo suficientemente robusta para Facebook, probablemente sea lo suficientemente robusta para ti. :-)

ACTUALIZACIÓN: si necesita funciones como la función de arrastrar y soltar en Internet Explorer, es posible que desee revisar la pandell más reciente y actualizada de jquery-splendid-textchange de jquery-splendid-textchange .

Answer 6

Intenta hacerlo con enfoque.

$("textarea").focusout(function() {
   alert(''textarea focusout'');
});

Answer 7

Prueba esto

 $(''textarea'').trigger(''change'');
 $("textarea").bind(''cut paste'', function(e) { });

Answer 8

Prueba esto en realidad:

$(''#textareaID'').bind(''input propertychange'', function() {

      $("#yourBtnID").hide();

      if(this.value.length){
        $("#yourBtnID").show();
      }
});

DEMO

Eso funciona para cualquier cambio que realice, escribiendo, cortando, pegando.

Answer 9

prueba esto ...

$("#txtAreaID").bind("keyup", function(event, ui) {                          

              // Write your code here       
 });

Answer 10

bind está en desuso Usar on :

$("#textarea").on(''change keyup paste'', function() {
    // your code here
});

Nota: el código anterior se activará varias veces, una vez para cada tipo de disparador coincidente. Para manejar eso, haz algo como esto:

var oldVal = "";
$("#textarea").on("change keyup paste", function() {
    var currentVal = $(this).val();
    if(currentVal == oldVal) {
        return; //check to prevent multiple simultaneous triggers
    }

    oldVal = currentVal;
    //action to be performed on textarea changed
    alert("changed!");
});

jsFiddle Demo

Answer 11

.delegate es el único que me está trabajando con jQuery JavaScript Library v2.1.1

 $(document).delegate(''#textareaID'',''change'', function() {
          console.log("change!");
    });