web-dev-qa-db-fra.com

changement de couleur de bordure de zone de texte à l'aide de javascript

Je suis en train de valider le formulaire. lorsque la saisie du formulaire est incorrecte, j'ajoute une bordure rouge dans la zone de texte:

document.getElementById("fName").style.borderColor="#FF0000"

cela me donne alors une bordure rouge 2px. Ce que je veux faire, c'est si l'utilisateur met une valeur correcte pour revenir à la bordure d'origine ... 

quelqu'un peut-il me dire comment je change la taille et la couleur de la bordure en javascript

javascriptcsstextboxborder
12
kevin

Utilisez plutôt des styles CSS avec des classes CSS

CSS

.error {
  border:2px solid red;
}

Maintenant en Javascript 

document.getElementById("fName").className = document.getElementById("fName").className + " error";  // this adds the error class

document.getElementById("fName").className = document.getElementById("fName").className.replace(" error", ""); // this removes the error class

La raison principale que je mentionne est que vous voulez changer la couleur de la bordure de l'élément erroné. Si vous choisissez votre chemin, vous devrez peut-être modifier de nombreux emplacements dans le code. Si vous choisissez ma façon, vous pouvez simplement éditer la feuille de style.

17
John Hartsock
document.getElementById("fName").style.border="1px solid black";
10
josh.trow

Ajouter un sur le changement événement à votre élément d'entrée:

<input type="text" id="fName" value="" onchange="fName_Changed(this)" />

Javascript:

function fName_Changed(fName)
{
    fName.style.borderColor = (fName.value != 'correct text') ? "#FF0000"; : fName.style.borderColor="";
}
3
BumbleB2na

Vous pouvez essayer

document.getElementById('name').style.borderColor='#e52213';
document.getElementById('name').style.border='solid';
3
CEN

document.getElementById("fName").style.borderColor="";

est tout ce dont vous avez besoin pour changer la couleur de la bordure.

Pour changer la taille de la bordure, utilisez element.style.borderWidth = "1px".

2
Matt Ball

Je suis d'accord avec Vicente Plata, vous devriez essayer d'utiliser jQuery IMHO est la meilleure librairie JavaScript. Vous pouvez créer une classe dans votre fichier CSS et procéder comme suit avec jquery:

$('#fName').addClass('name_of_the_class');

et c'est tout, et bien sûr, vous ne vous inquiétez pas de l'incompatibilité des navigateurs, c'est le problème de l'équipe de jQuery: D LOL

1
PachinSV

Si les utilisateurs entrent une valeur incorrecte, appliquez une bordure de couleur rouge 1px au champ de saisie:

document.getElementById('fName').style.border ="1px solid red";

Si l'utilisateur entre une valeur correcte, supprimez la bordure du champ de saisie:

document.getElementById('fName').style.border ="";
0
Nandu Hulsure