更改背景顏色的文本框輸入不工作時爲空

我有一個艱難的時間用這個JavaScript代碼來改變文本輸入的背景顏色，如果輸入爲空。更改背景顏色的文本框輸入不工作時爲空

下面是代碼：

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

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

我希望文本框出來黃色的開頭。

來源

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

注：你正在檢查值並將顏色設置爲不允許的值，這就是爲什麼它會給你提供錯誤。嘗試像上面那樣。

來源

2013-06-20 16:38:04

如果在文本框中存在某些東西，該如何去除顏色？ – samyb8

@ samyb8更新的小提琴... –

爲什麼它沒有工作，而不是有getElementsById我把getElementsByClassName和更改ID在HTML中的類？ – samyb8

風格不添加到輸入的值，因此使用像

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

來源

2013-06-20 16:35:55 bugwheels94

你沒有調用函數，你有其他錯誤，應該是：

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

Fiddle

您將inputVal設置爲輸入的字符串值，但您嘗試設置style.backgroundColor，它不會工作，因爲它是一個字符串，而不是元素。我改變了你的變量來存儲元素對象而不是它的值。

來源

2013-06-20 16:36:19 MrCode

對身體標記的onload嘗試設置它像

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

，之後該輸入域檢查的變化，如果某個值是存在的，或者它漆成黃色的像

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

來源

2013-06-20 16:40:06

試試這個：

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

來源

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>

來源

2013-06-20 16:47:21 gaspyr

您可以使用javascript和css來設計它。將樣式添加到CSS，並使用classlist屬性使用javascript添加/刪除樣式。這是一個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'); 
    } 
}

來源

2016-09-12 06:59:05

更改背景顏色的文本框輸入不工作時爲空

回答

相關問題