如何改變焦點顏色當輸入被填寫需要的屬性javascript/html/css

Question

我正在處理HTML表單。我已經爲我的一些輸入字段添加了必需的元素。因爲我使用Bootstrap，所以輸入字段在焦點時默認爲藍色。我已將所需的輸入字段設置爲input:required:focus {border: 1px solid red;}的紅色。現在，當填寫所需的輸入字段時，我想將輸入字段邊框更改爲綠色。我的問題是，這可能與CSS和如何？如果沒有，我怎樣才能實現這個Javascript或其他？

input:required:focus { 
 
    border: 1px solid red; 
 
    outline: none; 
 
} 
 
textarea:required:focus { 
 
    border: 1px solid red; 
 
    outline: none; 
 
} 
 
.form-horizontal { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form class="form-horizontal"> 
 

 
    <div class="form-group"> 
 
    <label class="col-md-2 control-label" for="Name"> 
 
     Full name <span class="required">*</span> 
 
    </label> 
 
    <div class="col-md-10"> 
 
     <input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text"> 
 
     <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label class="col-md-2 control-label" for="email"> 
 
     E-mail <span class="required">*</span> 
 
    </label> 
 
    <div class="col-md-10"> 
 
     <input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email"> 
 
     <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="johndoe@gmail.com">Format</a></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label class="col-md-2 control-label" for="phone"> 
 
     Phone number 
 
    </label> 
 
    <div class="col-md-10"> 
 
     <input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text"> 
 
     <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="Only numbers">Format</a></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label class="col-md-2 control-label" for="question"> 
 
     Question <span class="required">*</span> 
 
    </label> 
 
    <div class="col-md-10"> 
 
     <textarea rows="20" cols="40" class="form-control" id="question" required="" name="question"></textarea> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-10 col-md-offset-2"> 
 
    <button type="submit" class="btn btn-default formbuttonalign">Send mail!</button> 
 
    </div> 
 
</form>

Answer 1

於是我發現，HTML5包含valid和invalid選擇。

input:required:focus { 
    border: 1px solid red; 
    outline: none; 
    } 

textarea:required:focus { 
border: 1px solid red; 
outline: none; 
} 

input:focus:valid { 
border: 1px solid green; 
outline: none; 
} 

input:focus:invalid { 
border: 1px solid red; 
outline: none; 
} 


input:valid { 
border: 1px solid green; 
} 

您可以組合使用它與required選擇，以檢查其是否有效，所以如果它在，如果填寫的正確像電話號碼僅包含數字。有趣的部分是，它唯一的HTML5 & CSS3 :)

Answer 2

使用oninput所需場事件，然後驗證如果填充與否。

oninput="if(this.value != ''){ this.style.borderColor='green'; } else{ this.style.borderColor='red'; }" 

\t \t input:required:focus { 
 
     border: 1px solid red; 
 
     outline: none; 
 
    } 
 

 
    textarea:required:focus { 
 
     border: 1px solid red; 
 
     outline: none; 
 
    }

   <form class="form-horizontal"> 
 

 
        <div class="form-group"> 
 
         <label class="col-md-2 control-label" for="Name">Full name <span class="required">*</span></label> 
 
         <div class="col-md-10"> 
 
          <input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text" oninput="if(this.value != ''){ this.style.borderColor='green'; } else{ this.style.borderColor='red'; }"> 
 
          <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span> 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         <label class="col-md-2 control-label" for="email">E-mail <span class="required">*</span></label> 
 
         <div class="col-md-10"> 
 
          <input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email" oninput="if(this.value != ''){ this.style.borderColor='green'; } else{ this.style.borderColor='red'; }"> 
 
          <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="johndoe@gmail.com">Format</a></span> 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         <label class="col-md-2 control-label" for="phone">Phone number</label> 
 
         <div class="col-md-10"> 
 
          <input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text"> 
 
          <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="Only numbers">Format</a></span> 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         <label class="col-md-2 control-label" for="question">Question <span class="required">*</span></label> 
 
         <div class="col-md-10"> 
 
          <textarea rows="20" cols="40" class="form-control" id="question" required="" name="question" oninput="if(this.value != ''){ this.style.borderColor='green'; } else{ this.style.borderColor='red'; }"></textarea> 
 
         </div> 
 
        </div> 
 

 
        <div class="col-md-10 col-md-offset-2"> 
 
        <button type="submit" class="btn btn-default formbuttonalign">Send mail!</button> 
 
        </div> 
 
      </form>

Answer 3

當你想讓它變成綠色？立即開始輸入，或者當輸入字段失去焦點時？讓我假設你想在失去焦點時發生這種情況。另一個問題是：如果它失去了重點，它應該保持綠色嗎？我假設它會，因爲我的第一個假設是，它只會在失去焦點時變綠。糾正我，如果我的任何假設都是錯誤的

的Javascript：

$(function(){ 
 
     $('input:required,textarea:required').on('blur', function(){ 
 
      if($(this).val()!==''){ //assuming the form doesn't have some fields populated by default. 
 
      $(this).addClass('green-border'); 
 
      } else { 
 
      $(this).removeClass('green-border'); 
 
      } 
 
     }); 
 
    });

.green-border { 
 
    border: 1px solid green !important; 
 
} 
 

 
input:required:focus { 
 
    border: 1px solid red; 
 
    outline: none; 
 
} 
 

 
textarea:required:focus { 
 
    border: 1px solid red; 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<form class="form-horizontal"> 
 

 
       <div class="form-group"> 
 
        <label class="col-md-2 control-label" for="Name">Full name <span class="required">*</span></label> 
 
        <div class="col-md-10"> 
 
         <input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text"> 
 
         <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span> 
 
        </div> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label class="col-md-2 control-label" for="email">E-mail <span class="required">*</span></label> 
 
        <div class="col-md-10"> 
 
         <input id="email" name="email" placeholder="E-mail" class="form-control input-md" required="" type="email"> 
 
         <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="johndoe@gmail.com">Format</a></span> 
 
        </div> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label class="col-md-2 control-label" for="phone">Phone number</label> 
 
        <div class="col-md-10"> 
 
         <input id="phone" name="phone" placeholder="Phone number" class="form-control input-md" type="text"> 
 
         <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="Only numbers">Format</a></span> 
 
        </div> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label class="col-md-2 control-label" for="question">Question <span class="required">*</span></label> 
 
        <div class="col-md-10"> 
 
         <textarea rows="20" cols="40" class="form-control" id="question" required="" name="question"></textarea> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-md-10 col-md-offset-2"> 
 
       <button type="submit" class="btn btn-default formbuttonalign">Send mail!</button> 
 
       </div> 
 
     </form>