2016-12-17 66 views
0

问题:我有一个具有单选按钮和文本框的窗体。我想要做的是在文本框为空时显示红色边框。我能够做到的。但是,我希望在文本字段中输入字符时,红色边框会消失。更改背景颜色的组文本框

目前,我有以下几点:

function SubmitMe() { 

    if (document.SubmitIdea.Name.value=="") { 
     alert("Please enter your Name.") 
     document.SubmitIdea.Name.focus() 
     return false 
    } 

    if (document.SubmitIdea.Department.value=="") { 
     alert("Please enter your Department.") 
     document.SubmitIdea.Department.focus() 
     return false 
    } 


    if (document.SubmitIdea.Supervisor.value=="") { 
     alert("Please enter your Supervisor's Name") 
     document.SubmitIdea.Supervisor.focus() 
     return false 
    } 


    if (document.SubmitIdea.NomEmail.value=="") { 
     alert("Who enter your email address.") 
     document.SubmitIdea.NomEmail.focus() 
     return false 
    } 

    if (document.SubmitIdea.Phone.value=="") { 
     alert("Who enter your Phone Number") 
     document.SubmitIdea.Phone.focus() 
     return false 
    } 

    myOption = -1; 
    var anonymousContainer = document.getElementById('anonymousContainer'); 
    var anonymousTextField = document.getElementById('anonymousTextField'); 
    var anonymousInputs = document.getElementsByName('Anonymous'); 
      for (i=0; i<SubmitIdea.Anonymous.length; i++) { 
       if (SubmitIdea.Anonymous[i].checked) { 
        myOption = i; 
       } 
      } 
       if (myOption == -1) { 
        alert("Do you wish to remain anonymous?"); 
        anonymousContainer.className += 'borderedContainer'; 
        return false; 
       } 

     if(document.getElementById("textarea1").value=="" && document.getElementById("textarea2").value=="" && document.getElementById("textarea3").value==""){ 
     alert("Please provide a brief summary of your idea"); 
     if(document.getElementById("textarea1").value=="") { 
     if(document.getElementById("textarea1").value==""){ 
      anonymousTextField.className += 'borderedContainer'; 
      return false; 
     } 
     else 
      anonymousTextField.className += 'borderedContainer1'; 
      return false; 
     } 
     return false; 
     } 

    document.SubmitIdea.SubmitIdeaBtn.disabled = true 
    document.SubmitIdea.action = "Employee_Ideasp.cfm" 
    document.SubmitIdea.submit() 
    } 
    function Check(){ 
       if(document.getElementById('NO').checked) { 
        anonymousContainer.className += 'borderedContainer1'; 
       }else if(document.getElementById('YES').checked) { 
        anonymousContainer.className += 'borderedContainer1'; 
       } 
    } 
<div id="anonymousTextField"> 
    <textarea name="reason" id="textarea1" cols="6" maxlength="500" class="ideas" 
    style="background-color: transparent; color:##000000; font-size:14px;" 
    onFocus="clearTxt(this)" onkeydown="limitTxtArea(this); cntTxt(this, 500, 'cnt');" onkeyup="limitTxtArea(this); cntTxt(this, 500, 'cnt');"></textarea></div> 

它不会出现,当我在文本字段中输入文本的工作。

谢谢

+0

嗯,你正在启动函数调用,似乎并不存在 –

+0

@JordanS调用函数funcitons函数不存在?他们确实存在 –

+0

不在您提供的代码中。 –

回答

0

这可以通过使用下面的jQuery来实现:

(您需要包括jQuery来你的页面,如果不包括在内)。

$("input").keyup(function() { 
    var value = (this.value); 

    // if the value is not empty add green border 
    if (value != "") { 
     $(this).css("border", "5px solid green"); 
    } 
    // if value is empty add red border 
    else if (value == "") { 
     $(this).css("border", "5px solid red"); 
    } 

}).trigger("change"); 

将适用于所有输入类型

FIDDLEhttps://jsfiddle.net/x6oar6j1/