Zmiana koloru tła pola tekstowego nie działa, gdy jest pusta

Mam trudny czas z tym kodem javascript, aby zmienić kolor tła wprowadzania tekstu, jeśli wejście jest puste.Zmiana koloru tła pola tekstowego nie działa, gdy jest pusta

Oto kod:

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

Przykład: http://jsfiddle.net/2Xgfr/

spodziewałbym pole tekstowe wyjdzie żółty na początku.

Źródło

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

Uwaga: Ty sprawdzali wartość i ustawiali kolor na wartość, która jest niedozwolona, dlatego dawała ci błędy. spróbuj jak wyżej.

Źródło

2013-06-20 16:38:04

Co powiesz na usunięcie koloru, jeśli coś jest w polu tekstowym? – samyb8

@ samyb8 updated fiddle ... –

Dlaczego to nie działa, jeśli zamiast getElementsById wstawiam getElementsByClassName i zmieniam identyfikator klasy w kodzie HTML? – samyb8

Nie dodawaj style do wartości wejścia więc używać jak

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

Źródło

2013-06-20 16:35:55 bugwheels94

Nie wywołać funkcję i masz inne błędy, powinno być:

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

Fiddle

Ustawiłeś inputVal na wartość ciągu wejściowego, ale próbujesz ustawić style.backgroundColor na tym, który nie zadziała, ponieważ jest ciągiem znaków, a nie elementem. Zmieniłem zmienną, aby przechowywać obiekt elementu zamiast jego wartości.

Źródło

2013-06-20 16:36:19 MrCode

na body onLoad zawieszki spróbuj ustawić go jak

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

a potem na zmianę tej kontroli pola wejściowego jeśli jakaś wartość ma, lub pomalować go żółty jak

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

Źródło

2013-06-20 16:40:06

Spróbuj tego:

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

Źródło

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>

Źródło

2013-06-20 16:47:21 gaspyr

Można go stylizować za pomocą javascript i css. Dodaj styl do css i użyj stylu dodaj/usuń javascript przy użyciu właściwości classlist. Tutaj jest dla niego JSFiddle.

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

Źródło

2016-09-12 06:59:05

Zmiana koloru tła pola tekstowego nie działa, gdy jest pusta

Odpowiedz

Powiązane problemy