modifier le style ( couleur et bordure) d'un input text

**Han Han** · 30/06/2013, 22h24

Bonsoir tout le monde,
je suis débutante en javacript

, et je cherche a modifier la couleur de background avec la bordure lorsque la valeur de cette input text égal a un texte précis et avec l’événement onload , j'esseye avec ce morceau de code mais en vain , je cherche maintenant ce qui de faute dedan merci d'avance pour votre aide

NB :
--script ----------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
  <script type="text/javascript">
  window.onload = function() {
      changeC(){
      var Msg = document.getElementById ("Msg");  
      if (Msg.value=='Bien inséré !') {  
    	  document.getElementById("Msg").style.border = "2px solid #00FF00;"  ;
    	  document.getElementById("Msg").style.backgroundColor= "#00FF00;" ;
      }
    }  
  }
  </script>

-- Body ----------

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body onload="changeC();">
..
<input type="text" style="border: 0;" name="Msg" id="Msg"  />

**SpaceFrog** · 01/07/2013, 08h55

Plusieurs choses

pas besoin de rappeler getElementById('Msg').

pas de ; DANS les propriétés de style

En JavaScript une fonction se déclare avec le mot clef function.

Tu fais un window.onload et tu rappelles une fonction mal déclarée dans le onload du body ...

Ensuite dans ta fonction tu testes le value de ton input qui n'en a pas !

Et pour terminer si tu mets une bordure de la même couleur que le fond, tu risque de ne pas la voir ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 <script type="text/javascript">
 function changeC(){
 
      var Msg = document.getElementById ("Msg");  
      if (Msg.value=='Bien inséré !') {  
       Msg.style.border="2px solid #FF0000";
       Msg.style.backgroundColor= "#00FF00" ;
      }
    }  
</script>

..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<body onload="changeC();">
<input type="text" style="border: 0;" name="Msg" id="Msg" value="Bien inséré !" />

cf http://jsfiddle.net/vSWbR/2/

**SylvainPV** · 01/07/2013, 13h51

A noter que c'est possible à réaliser en CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#Msg[value='Bien inséré !']{
    border: 2px solid red;
    background-color: lime;
}

Mais cela ne fonctionnera que pour l'attribut value initial au chargement de la page. Pour dynamiser le style, on a besoin de Javascript. Comme ceci par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("Msg").addEventListener("change", function(){ this.setAttribute("value", this.value)                                                                                                                        });

http://jsfiddle.net/vSWbR/3/

**equi-monde** · 26/11/2018, 00h57

Salut à tous,

Je suis désolé de réouvrir un vieux post, mais je bloque (Noob en javascript et autre :/ )

J'ai adapté le code ci-dessus pour en faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var classautocalcule = document.getElementById ("classautocalcule");
var classnonautocalcule = document.getElementById ("classnonautocalcule"); 
 
  if (classautocalcule.value == classnonautocalcule.value) { 
 
    classautocalcule.style.border="2px solid #00FF00";
    classnonautocalcule.style.border="2px solid #00FF00";
 
  }
  else {
 
    classautocalcule.style.border="2px solid #FF0000";
    classnonautocalcule.style.border="2px solid #FF0000";  
 
  }
 
}  
 
changeC()

Seulement, ce n'est pas du ontime

Une idée ?

Merci d'avance

**psychadelic** · 26/11/2018, 02h21

et elle sert à quoi la ligne 20 ? changeC().
.
.
une traduction serait la bien venue, ainsi qu'une description du but à atteindre et son contexte

Seulement, ce n'est pas du ontime

**equi-monde** · 26/11/2018, 02h25

Hello,

Peut-être pas à grand chose, mais c'est comme ça que c'était avant.

J'ai un peu avancé, mais ça ne fonctionne toujours pas.

En gros, j'ai plusieurs champs :

Le premier est le montant.
Puis j'ai une série de subdivisions qui doivent donner le même montant. (.fee)

Le javascript fait donc la somme de tous les fees

et si la somme est égal au montant repris dans le premier champs c'est ok --> vert si pas --> rouge

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var $fees = $('.fee').change(function(){
  var total = 0;
  var classnonautocalcule = document.getElementById("classnonautocalcule").value;
 
  //iterate through all the fee elements and find the total
  $fees.each(function(){
	total += (parseFloat($.trim(this.value)) ||0)
  })
  $('.classautocalcule').text( total.toFixed(2) );
 
  if(total == classnonautocalcule){ 
  $('.classautocalcule').style.border="2px solid #00FF00";
  }
  else{
  $('.classautocalcule').style.border="2px solid #FF0000";
 
   }
 
});

**equi-monde** · 26/11/2018, 02h36

J'y suis arrivé

Merci

modifier le style ( couleur et bordure) d'un input text

JavaScript

Discussions similaires

Partager

Partager