Comment ajouter ou supprimer des bordures de champ de texte

J'ai une zone de texte dans le formulaire html, comme ceci

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

Une fois que l'utilisateur saisit du texte dans et se déplace à l'extérieur je veux faire de la bordure de 1 px (afin qu'il ne ressemble pas à un champ texte normal). Je l'obtenir par 

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

Maintenant, lorsque l'utilisateur revient sur le champ de texte, je veux faire sur le champ de texte ressemble original normale champ de texte avec la sortie de valeur.

InformationsquelleAutor prashant | 2010-11-19
  1. 4

    En supposant que vous souhaitez le input différent seulement si elle contient une valeur, je te suggère ceci:

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

    Et de définir les bordered classe css dans le fichier css (plutôt que de l'ajout/suppression de propriétés css de jQuery avec css()), par exemple:

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

    Démo à la JS Fiddle.

    InformationsquelleAutor David Thomas
  2. 2

    Cela devrait fonctionner: 

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

    Il ressemble $("#searchforstatus").css("border", null) travaillé avant 1.4.3, mais il n'était pas jamais fait valide: http://bugs.jquery.com/ticket/7233

    InformationsquelleAutor Emmett
  3. 0
    //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");
});
    InformationsquelleAutor Marko
  4. 0

    faire strictement dans le CSS, ne pas utiliser le javascript pour elle, c'est comme utiliser un marteau pour un aliment de base..

    <style>
#searchforstatus{
border:none;
}


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

</style>

    OU. créer des classes avec border:none et des frontières;1px et attribuer/supprimer à volonté.

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

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

    Je pense que la meilleure et la solution est simple:

    $("#searchforstatus").css("border", "none");
    InformationsquelleAutor AFetter
  7. 0

    Si vous utilisez jquery mobile et si vous le tester pour mobile, vous devez 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;
}

    C'est de travailler pour moi

    InformationsquelleAutor Karthik Sivakumar