web-dev-qa-db-ja.com

空のときにテキストボックス入力の背景色を変更できない

入力が空の場合にテキスト入力の背景色を変更するには、このjavascriptコードで苦労しています。

コードは次のとおりです。

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

例： http://jsfiddle.net/2Xgfr/

最初はテキストボックスが黄色になります。

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

注：値をチェックし、許可されていない値に色を設定していたため、エラーが発生していました。上記のようにしてみてください。

27
Dhaval Marthak

bodyタグのonLoadで次のように設定してみてください

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

その後、その入力フィールドの変更時に値があるかどうかを確認するか、黄色のようにペイントします

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

関数を呼び出さなかったため、他のエラーがあります：

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

フィドル

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

CSSで最初にテキストボックスのスタイルを設定してから、jsでテキストボックスを変更できます。

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

js：

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