खाली होने पर टेक्स्ट बॉक्स इनपुट का पृष्ठभूमि रंग बदलना

इनपुट इनपुट खाली होने पर मुझे टेक्स्ट इनपुट के पृष्ठभूमि रंग को बदलने के लिए इस जावास्क्रिप्ट कोड के साथ कठिन समय हो रहा है।खाली होने पर टेक्स्ट बॉक्स इनपुट का पृष्ठभूमि रंग बदलना

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

उदाहरण:: http://jsfiddle.net/2Xgfr/

मैं पाठ बॉक्स शुरुआत में पीला बाहर आने के लिए उम्मीद करेंगे

यहाँ कोड है।

स्रोत

2013-06-20 samyb8

डेमो-->http://jsfiddle.net/2Xgfr/829/

एचटीएमएल

<input type="text" id="subEmail" onchange="checkFilled();">

जावास्क्रिप्ट

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 अद्यतन fiddle ... –

यह क्यों काम नहीं करता है अगर getElementsById प्राप्त करने के बजाय मैं getElementsByClassName डालता हूं और 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 सेट कर रहे थे, लेकिन फिर आपनेसेट करने का प्रयास कियापर, जो काम नहीं करेगा क्योंकि यह एक स्ट्रिंग है, तत्व नहीं। मैंने आपके वैरिएबल को इसके ऑब्जेक्ट के बजाय एलिमेंट ऑब्जेक्ट को स्टोर करने के लिए बदल दिया है।

स्रोत

2013-06-20 16:36:19 MrCode

शरीर टैग के ऑनलोड पर

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

आप इसे जावास्क्रिप्ट और सीएसएस का उपयोग कर शैली बना सकते हैं। शैली को सीएसएस में जोड़ें और वर्गीकरण संपत्ति का उपयोग कर जावास्क्रिप्ट जोड़ें/हटाएं शैली का उपयोग करें। इसके लिए यहां एक 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

खाली होने पर टेक्स्ट बॉक्स इनपुट का पृष्ठभूमि रंग बदलना

उत्तर

संबंधित मुद्दे