it-swarm.com.de

Ändern der Hintergrundfarbe der Textfeld-Eingabe, wenn sie leer ist

Mit diesem JavaScript-Code habe ich Schwierigkeiten, die Hintergrundfarbe einer Texteingabe zu ändern, wenn die Eingabe leer ist.

Hier ist der Code:

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

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

Ich würde erwarten, dass das Textfeld am Anfang gelb erscheint.

11
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();

Hinweis: Sie haben den Wert geprüft und die Farbe auf einen Wert gesetzt, der nicht zulässig ist. Deshalb wurden Fehler ausgegeben. Versuchen Sie es wie oben.

26
Dhaval Marthak

onLoad des Body-Tags versuchen, es wie zu setzen

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

und danach bei Änderung dieses Eingabefelds prüfen, ob ein Wert vorhanden ist, oder Paint it yellow like

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

Sie haben die Funktion nicht aufgerufen und haben andere Fehler.

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

Fiddle

Sie haben inputVal auf den Zeichenfolgenwert der Eingabe gesetzt, aber dann haben Sie versucht, style.backgroundColor darauf zu setzen, was nicht funktioniert, da es sich um eine Zeichenfolge und nicht um das Element handelt. Ich habe Ihre Variable geändert, um das Elementobjekt anstelle seines Werts zu speichern.

4
MrCode

Versuche dies:

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
    inputVal.style.backgroundColor = "yellow";
    }
}
3
Ankit Zalani
<! 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>

2
gaspyr

Fügen Sie keine Stile zum Eingabewert hinzu, verwenden Sie also wie

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

Sie können es mit Javascript und CSS gestalten. Fügen Sie den Stil zu css hinzu und verwenden Sie den JavaScript-Stil unter Verwendung der classlist-Eigenschaft. Hier ist ein JSFiddle dafür.

  <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');
  }
}
0
Kurenai Kunai

Sie könnten das CSS zuerst das Textfeld formatieren lassen, dann js es ändern lassen:

<input type="text" style="background-color: yellow;" id="subEmail" />

js:

function changeColor() {
  document.getElementById("subEmail").style.backgroundColor = "Insert color here"
}
0
I.M.SMART