textarea vide doit montrer le bouton désactivé

J'ai un textarea et un bouton. Il y a deux classes buttonEnabled et buttonDisabled. Je veux appliquer buttonEnabled seulement quand il y a du texte dans la zone de texte. Ainsi, si l'utilisateur saisit une zone de texte, le bouton est activé et lorsqu'il efface tout le texte en le sélectionnant et en le coupant ou en le remplaçant par un retour arrière. Je veux que mon bouton semble désactivé. Aussi je veux faire ceci seulement avec javascript et pour une raison quelconque ne veux pas utiliser jQuery.textarea vide doit montrer le bouton désactivé

Source

2010-09-15 sushil bharwani

Quelle est exactement votre question? Où êtes-vous coincé? –

Je l'ai fait en utilisant un événement keyup sur textarea donc tout fonctionne bien. Mais quand je suis avec la souris, sélectionnez tout le texte dans textarea et coupez-le. Mon textarea devient vide et le bouton semble toujours activé. Cependant, je veux montrer mon bouton désactivé tout le temps si textarea est vide. –

Actuellement, la seule façon que vous pouvez être sûr de ramasser tous les changement de contenu d'entrée est à interroger tout de suite pour elle. En effet, il existe de nombreuses manières possibles de modifier une entrée sans générer d'événement keyup ou immédiat change. Ainsi que le copier-coller, il y a glisser-déposer, annuler/refaire, autocomplétion, changements orthographe ...

HTML5 propose un événement input qui se déclenchera dans tous les cas comme ceci, mais le support du navigateur n'est pas là encore, malheureusement.

Vous pouvez bien sûr sauvegarder l'interrogation en recherchant plus rapidement le cas le plus courant où vous obtenez un événement. Par exemple:

function watchInput(input, callback) { 
    var value= input.value; 
    function check() { 
     if (input.value!==value) 
      callback.call(input, value); 
     value= input.value; 
    } 
    input.onchange=input.onkeyup= check; 
    setInterval(check, 400); 
}; 

watchInput(document.getElementById('mytextarea', function(oldvalue) { 
    document.getElementById('mybutton').className= this.value===''? 'buttonDisabled' : 'buttonEnabled'; 
});

Source

2010-09-15 10:14:24 bobince

Ecrivez le même code (que vous avez écrit lors d'un événement de manipulation) sur un événement de flou.

Voir cette réponse Disallow typing of few of characters e.g.'<', '>' in all input textboxes using jquery

Dans cette réponse, il a été fait en utilisant jQuery et le but était différent, mais vous pouvez aussi faire ce que vous avez besoin sans utiliser jQuery.

Source

2010-09-15 10:00:05 IsmailS

ismail s'il vous plaît regarder mes commentaires à Wduffy. Votre réponse ne m'aidera pas dans le scénario actuel. –

Gère l'événement onblur ainsi que l'événement onkeyup. Voici un exemple en Javascript simple.

<html> 
<head> 
<script> 

function setClass() 
{ 
    var area = document.getElementById('textarea'); 
    var button = document.getElementById('button'); 

    if (area.value.length == 0) 
     button.className = "buttonDisabled" 
    else 
     button.className = "buttonEnabled" 
} 

</script> 
</head> 
<body> 

<textarea id="textarea" onkeyup="setClass()" onblur="setClass()"></textarea><br /> 
<button id="button" class="buttonDisabled">Your Button<button> 

</body> 
</html>

Source

2010-09-15 10:07:54 WDuffy

sur flou ne s'exécute que lorsque j'ai mon focus en dehors de la zone de texte. Considérons un scénario lorsque je charge mon formulaire, mon bouton est désactivé. Ensuite, je commence à taper dans mon bouton devient activé lors de la saisie. Maintenant, avec la souris, sélectionnez tout le texte et couper le texte mon attention est toujours sur la zone de texte qui est vide, mais mon bouton semble activé. –

textarea vide doit montrer le bouton désactivé

Répondre

Questions connexes