Wie kann ich textarea ausblenden, wenn die Eingabe leer ist?

Question

Wie benutze ich jQuery, um textarea zu verbergen, wenn der Eingabetext leer ist?

Mein Versuch:

jQuery(document).chnage(function($) { 
    var value=$.trim($('input').val()); 

    if (value.length < 0) { 
     $('textarea[name="your-message"]').hide(); 
    } 
}); 

Answer 1

Verwenden keypress oder html5 input Ereignis statt Änderungsereignis für das Eingangselement und wechseln toggle() Methode in jQuery verwenden.

// bind input event handler 
 
$('input').on('input', function() { 
 
    // toggle visible state based on value 
 
    $('textarea[name="your-message"]').toggle(this.value.trim() !== ''); 
 
});

textarea { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<textarea name="your-message"></textarea>

---

Probleme im Code:

1. Da Sie $ als Callback-param bieten hält es event Objekt innerhalb der Callback (nicht jQuery).
2. Änderungsereignis wird nur ausgelöst, wenn das Element den Fokus verliert, nachdem sein Wert geändert wurde.
3. Sie verbergen nur das Element innerhalb des Callbacks, es ist kein Code vorhanden, um es erneut anzuzeigen.
4. chnage sollte 10 sein (ich denke, es ist ein Tippfehler).

Answer 2

Ihr Problem ist, dass Sie $ mit weiteren Wert neu definieren:

jQuery(document).change(function($) { 
    // remove this bad boy -------^ 
    // $ is jQuery.Event object here 
}); 

Der erste Parameter für Ereignishandler jQuery.Event Objekt sein wird, nicht jQuery selbst.

Entfernen Sie $ aus der Parameterliste und verwenden Sie value.length == 0 wird es funktionieren.

Answer 3

Versuchen Sie, diese Sie

$('#txtID').on('input', function() { 
 
if(this.value.trim() !== ''){ 
 
$('#txtID').show(); 
 

 
}else{ 
 
$('#txtID').hide(); 
 

 
} 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<textarea rows="4" cols="50" id="txtID"></textarea>