想要一個綠色的複選標記出現在文本字段的右側

-2

我創建了一個包含一系列文本字段的非常基本的html表單。我只是在尋找一種方法，如果輸入了某個值，則會在字段的右側顯示綠色檢查。我嘗試了一些CSS（不太瞭解），但無濟於事。有任何想法嗎？我一直在尋找一段時間。這是我到目前爲止。由於想要一個綠色的複選標記出現在文本字段的右側

<!DOCTYPE html> 
<html> 
    <head> 

     <title>CRM Application Form</title> 
     <style type="text/css"> 
      label.valid { 
       width: 24px; 
       height: 24px; 
       background: url(assets/img/valid.png) center center no-repeat; 
       display: inline-block; 
       text-indent: -9999px; 
      } 

      label.error { 
       font-weight: bold; 
       color: red; 
       padding: 2px 8px; 
       margin-top: 2px; 
      } 

     </style> 
    </head> 

    <body> 

      <h1 style="text-align:center">CRM Application Form</h1> 
      <form> 
       <fieldset style="background-color:lightgray"> 
        <legend style="font-weight:600">Personal Information</legend> 
        Date of Birth: 
        <input type="date" id="DOB" name="DOB" required><br> 
        Social Security #: 
        <input type="text" id="SS#" name="SS#" value="" onchange="checkField(this.value)"><br>      
        Location: 
        <input type="text" id="Location" name="Location" /><br> 
        Ethnicity: 
        <input type="text" id="Ethnicity" name="Ethnicity" /><br /> 
        Citizenship: 
        <input type="radio" id="Yes" name="Yes" value="Yes" />Yes 
        <input type="radio" id="No" name="No" value="No" />No<br /> 
        Gender: 
        <input type="text" id="Gender" name="Gender" /><br /> 
        Marital Status: 
        <input type="text" id="Marital Status" name="Marital Status" /><br /> 
        Previous Last Name: 
        <input type="text" id="PLN" name="PLN" /><br /> 
       </fieldset> 
       <fieldset style="background-color:lightgray"> 
        <legend style="font-weight:600">Contact Information</legend> 
        Address: 
        <input type="text" id="Address" name="Address" required><br /> 
        Email: 
        <input type="email" id="email" name="email" required><br /> 
       </fieldset> 
       <fieldset style="background-color:lightgray"> 
        <legend style="font-weight:600">Education</legend> 
        Education History: 
        <input type="text" id="EH" name="EH" /><br /> 
        Academic Level: 
        <input type="text" id="AL" name="AL" /><br /> 
       </fieldset> 
       <fieldset style="background-color:lightgray"> 
        <legend style="font-weight:600">Other Information</legend> 
        Military Status: 
        <input type="text" id="MS" name="MS" /><br /> 
        POI: 
        <input type="text" id="POI" name="POI" /><br> 
        Employment Goal: 
        <input type="text" id="EG" name="EG" /><br /> 
        Program: 
        <input type="text" id="Program" name="Program" /><br /> 
        Market Segment: 
        <input type="text" id="Mkt" name="Mkt" /><br /> 
        FA: 
        <input type="checkbox" id="FA" name="FA" /> 
        Payment: 
        <input type="checkbox" id="Payment" name="Payment" /><br /> 
        Notes:<br /> 
        <textarea id="Notes" name="Notes"> </textarea><br /> 
       </fieldset> 
       <input type="submit" /> 

      </form> 

</body> 

    </html>

來源

2014-11-05 Jmeiii

等都不是「寫我的代碼爲我」的網站。如果您有特定的問題，請隨時提出一個新問題。 – Scimonster 2014-11-05 19:22:24

@Scimonster他並沒有要求某人爲他寫代碼 - 儘管我猜他會這麼做的。 – 2014-11-05 19:25:37

@NicholasKyriakides是的，因爲沒有現有的JS試圖做到這一點。 – Scimonster 2014-11-05 19:26:34

添加類，你要聽的輸入 - 把你的綠色對勾圖像到它的權利，但有一種風格=「顯示：無;」

<input type='text' id='tbTest1' class='CheckChange'/> 
<img src='CheckMark.jpg' style='display:none;'/>

然後添加一些JavaScript來顯示圖像時存在值 - 如果不是隱藏它：

$("#document").ready(function(){ 
    $(".CheckChange input[type='text']").on("change", function(){ 
     if ($(this).val().length > 0) 
      $(this).next("img").show(); 
     else 
      $(this).next("img").hide(); 
    }); 
});

來源

2014-11-05 19:23:39

這裏是動態插入的圖像的想法。在這個例子中，我使用了div，但是你可以替換你需要的元素。

$(function() { 
 
    $('input').change(function() { 
 
    var $input = $(this), 
 
     $flag = $input.next(); 
 

 
    if (!$input.val()) { 
 
     $flag.remove(); 
 
    } 
 
    
 
    if ($flag.length == 0 || !$flag.is('.valid')) { 
 
     $input.after('<div class="valid"></div>'); 
 
    } 
 
    }); 
 
});

.valid { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" /> 
 
<input type="text" /> 
 
<input type="text" />

來源

2014-11-05 19:37:37 Talmid

謝謝Talmid。我結束了使用JQuery toggle（）函數。這有幫助。 – Jmeiii 2014-11-06 21:18:11

想要一個綠色的複選標記出現在文本字段的右側

回答

相關問題