it-roy-ru.com

Изменение цвета фона ввода текста не работает, когда пусто

Мне тяжело с этим кодом JavaScript, чтобы изменить цвет фона ввода текста, если ввод пуст.

Вот код:

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

Пример: http://jsfiddle.net/2Xgfr/

Я ожидал бы, что текстовое поле выйдет желтым в начале.

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

Примечание: Вы проверяли значение и устанавливали цвет в значение, которое недопустимо, поэтому оно выдавало вам ошибки. попробуйте как выше.

26
Dhaval Marthak

на onLoad тега body попробуйте установить его как

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

и после этого при изменении этого поля ввода проверьте, есть ли какое-либо значение, или закрасьте его в желтый цвет, как

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

Вы не вызывали функцию, и у вас есть другие ошибки, должны быть:

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

Fiddle

Вы устанавливали inputVal в строковое значение ввода, но затем вы пытались установить style.backgroundColor, что не будет работать, потому что это строка, а не элемент. Я изменил вашу переменную, чтобы хранить объект элемента вместо его значения.

4
MrCode

Попробуй это:

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

Не добавляйте стили к значению ввода, поэтому используйте как

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

Вы можете стилизовать его, используя javascript и css. Добавьте стиль в css и используйте стиль добавления/удаления javascript, используя свойство classlist. Вот 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');
  }
}
0
Kurenai Kunai