Question

问题：我的表单中有单选按钮和文本字段。我想要做的是当文本框为空时，文本框上会出现一个红色边框。我能做到的。但是，我希望在文本字段中输入字符时，红色边框会消失。

我目前有以下内容：

   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>

当我在文本字段中输入文本时，它似乎不起作用。

谢谢

Answer 1

这可以通过使用以下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");

将适用于所有输入类型

FIDDLE https://jsfiddle.net/x6oar6j1/

更改组文本字段的背景颜色

1 个答案: