Cambiare il colore di sfondo dell'input della casella di testo non funzionante quando vuoto

Sto attraversando un periodo difficile con questo codice javascript per modificare il colore di sfondo di un input di testo se l'input è vuoto.Cambiare il colore di sfondo dell'input della casella di testo non funzionante quando vuoto

Ecco il codice:

function checkFilled() { 
    var inputVal = document.getElementById("subEmail").value; 
    if (inputVal == "") { 
     inputVal.style.backgroundColor = "yellow"; 
       } 
     }

Esempio: http://jsfiddle.net/2Xgfr/

mi si aspetterebbe la casella di testo a venire fuori gialla all'inizio.

fonte

2013-06-20 samyb8

DEMO-->http://jsfiddle.net/2Xgfr/829/

HTML

<input type="text" id="subEmail" onchange="checkFilled();">

JavaScript

function checkFilled() { 
    var inputVal = document.getElementById("subEmail"); 
    if (inputVal.value == "") { 
     inputVal.style.backgroundColor = "yellow"; 
    } 
    else{ 
     inputVal.style.backgroundColor = ""; 
    } 
} 

checkFilled();

Nota: È stavo controllando il valore e impostando il colore sul valore che non è consentito, ecco perché ti stava dando degli errori. prova come sopra.

fonte

2013-06-20 16:38:04

come rimuovere il colore se c'è qualcosa nella casella di testo? – samyb8

@ samyb8 ha aggiornato il violino ... –

Perché non funziona se invece di avere getElementsById metto getElementsByClassName e cambi id per la classe nell'HTML? – samyb8

Non aggiungere stili di valore dell'ingresso in modo da utilizzare come

function checkFilled() { 
    var inputElem = document.getElementById("subEmail"); 
    if (inputElem.value == "") { 
     inputElem.style.backgroundColor = "yellow"; 
       } 
     }

fonte

2013-06-20 16:35:55 bugwheels94

non hai chiamato la funzione e si dispone di altri errori, dovrebbe essere:

function checkFilled() { 
    var inputVal = document.getElementById("subEmail"); 
    if (inputVal.value == "") { 
     inputVal.style.backgroundColor = "yellow"; 
    } 
} 
checkFilled();

Fiddle

Si stava impostando inputVal sul valore di stringa dell'ingresso, ma poi si è tentato di impostare style.backgroundColor su di esso, che non funzionerà perché è una stringa, non l'elemento. Ho cambiato la tua variabile per memorizzare l'oggetto elemento anziché il suo valore.

fonte

2013-06-20 16:36:19 MrCode

sul onLoad tag del corpo provare con un valore come

document.getElementById("subEmail").style.backgroundColor = "yellow";

e dopo che in cambio di quella di controllo campo di input se qualche valore è lì, o dipingerlo giallo come

function checkFilled() { 
var inputVal = document.getElementById("subEmail"); 
if (inputVal.value == "") { 
    inputVal.style.backgroundColor = "yellow"; 
      } 
    }

fonte

2013-06-20 16:40:06

Prova questa:

function checkFilled() { 
var inputVal = document.getElementById("subEmail"); 
if (inputVal == "") { 
    inputVal.style.backgroundColor = "yellow"; 
    } 
}

fonte

2013-06-20 16:44:57

<! DOCTYPE html> 
<html> 
<head></head> 
<body> 

    <input type="text" id="subEmail"> 


    <script type="text/javascript"> 

     window.onload = function(){ 

     var subEmail = document.getElementById("subEmail"); 

     subEmail.onchange = function(){ 

      if(subEmail.value == "") 
      { 
       subEmail.style.backgroundColor = "red"; 
      } 
      else 
      { 
       subEmail.style.backgroundColor = "yellow"; 
      } 
     }; 

    }; 



    </script> 

</body>

fonte

2013-06-20 16:47:21 gaspyr

È possibile applicare uno stile utilizzando javascript e css. Aggiungi lo stile al css e usa javascript add/remove style usando la proprietà classlist. Ecco un JSFiddle per questo.

<div class="div-image-text"> 
    <input class="input-image-url" type="text" placeholder="Add text" name="input-image"> 
    <input type="button" onclick="addRemoteImage(event);" value="Submit"> 
    </div> 
    <div class="no-image-url-error" name="input-image-error">Textbox empty</div> 

addRemoteImage = function(event) { 
    var textbox = document.querySelector("input[name='input-image']"), 
    imageUrl = textbox.value, 
    errorDiv = document.querySelector("div[name='input-image-error']"); 
    if (imageUrl == "") { 
    errorDiv.style.display = "block"; 
    textbox.classList.add('text-error'); 
    setTimeout(function() { 
     errorDiv.style.removeProperty('display'); 
     textbox.classList.remove('text-error'); 
    }, 3000); 
    } else { 
    textbox.classList.remove('text-error'); 
    } 
}

fonte

2016-09-12 06:59:05

Cambiare il colore di sfondo dell'input della casella di testo non funzionante quando vuoto

risposta

Problemi correlati