Comment ajouter Supprimer la bordure du champ texte

Question

J'ai une zone de texte sous forme html comme celui-ci

'&lt input id="yourinput" type="text" &gt' 

Une fois que l'utilisateur saisit du texte dans et se déplace sur je veux faire de la frontière à 1 px (de sorte que ne ressemble pas à un champ de texte normal). J'en ce sens par

$("#searchforstatus").css("border", "1px"); 

Maintenant, lorsque l'utilisateur revient au champ de texte, je veux faire le regard du champ de texte comme champ de texte à la recherche normale d'origine avec la valeur sortie en elle.

Answer 1

En supposant que vous voulez que le input aspect différent seulement quand il contient une valeur, je vous suggère ceci:

$(document).ready(
    function(){ 
     $('#textInput').blur(
      function(){ 
       if ($(this).val()) { 
        $(this).addClass('bordered'); 
       } 
      }); 
     $('#textInput').focus(
      function(){ 
       $(this).removeClass('bordered'); 
      }); 
    }); 

Et définir la classe bordered css dans le fichier CSS (plutôt que d'ajouter/supprimer des propriétés CSS dans jQuery avec css()), par exemple:

.bordered { 
    border: 1px solid #f00; 
} 

Demo at JS Fiddle.

Answer 2

// Add border when user enters text field 
$("#yourinput").focus(function() { 
    $(this).css("border", "1px"); 
}); 

// Remove border when user leaves text field 
$("#yourinput").blur(function() { 
    $(this).css("border", "0"); 
}); 

Answer 3

font seulement dans le CSS, ne pas utiliser javascript pour cela, c'est comme l'utilisation d'un marteau pour un aliment de base ..

<style> 
#searchforstatus{ 
border:none; 
} 


#searchforstatus:focus{ 
border:1px solid silver; 
} 

</style> 

OU. Créez des classes avec border: none et border; 1px et attribuez/désaffectez-les à volonté.

Answer 4

Cela devrait fonctionner:

$("#searchforstatus").css("border", ""); 

Il ressemble à $("#searchforstatus").css("border", null) travaillé avant 1.4.3, mais il n'a pas été jamais réellement valable: http://bugs.jquery.com/ticket/7233

Answer 5

$("#yourinput").focus(function() { 
    $(this).css("border", ""); 
} 

$("yourinput").blur(function() { 
    if($(this).val() != "") 
      $(this).css("border", "1px"); 
} 

Answer 6

Je pense que la meilleure solution et simple est:

$("#searchforstatus").css("border", "none"); 

Answer 7

Si vous utilisez jquery mobile et si vous testez pour vous mobile besoin d'ajouter le code suivant dans votre fichier css

textarea:focus, input:focus{ 
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);  
    -webkit-user-modify: read-write-plaintext-only; 
} 

Cela fonctionne pour moi