Question

我希望每个输入都有HTML innerText，当它有效且无效时。请按照下面的HTML代码，我希望innerText分别对有效和无效输入说有效和无效。如果我不清楚，请评论。

＆＃13;

<html>
 <head>
  <style>

  .input:valid {
               background:green;}

  .input:invalid {
               background:#F3BBBB;}

  </style>


<body>
 <table>  

  <tr>
   <td><b>Year-month:</td><td><input class="input"                
                                     type="text"                    
                                     name="ym"                        
                                     id="ym"                    
                                     maxlength="7"                  
                                     size="10"                      
                           pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2]))" 
                                     placeholder="yyyy-mm"></td>

   <td><b>Lot:</td><td><input class="input"                       
                              type="text"                          
                              name="lot"                             
                              id="lot"                          
                              maxlength="1"                         
                              size="10"                             
                              pattern="[1-7]{1}"           
                              placeholder="Lot"></td>
 </tr>
 <tr>
  <td><b>Page-no:</td><td><input class="input"                    
                                 type="text"          
                                 name="pn"  
                                 id="pn"                        
                                 maxlength="5"              
                                 size="10"    
                                 pattern="[0-9]{5}"         
                                 placeholder="Page Number"></td>

  <td><b>Page-Total:</b></td><td><input class="input"             
                                        type="text" 
                                        name="pt"                     
                                        id="pt"                 
                                        maxlength="5"               
                                        size="10"                   
                                        pattern="[0-9]{2}"  
                                        placeholder="Page Total"></td>
   </tr>
  </table>
 </body>
 </html>

＆＃13;

Answer 1

你想要这样的东西吗？

$(document).ready(function() {
  $("input[type='text']").keyup(function() { // listen keys
    var inp = $(this);
    if (inp.is(":invalid")) { // if has invalid selector
      inp.val("invalid"); // set text invalid
    } else if (inp.is(":valid")) { //if has valid selector
      inp.attr("style", "background:green") // changing text is not logical so changed background color to green, but you can change btw.
    }

  });
});

demo

希望有所帮助，

Answer 2

这可能是你想要的：

  .input:valid {
               background:;}

  .input:invalid {
               background:#F3BBBB;}

<html>
<body>
 <table>  

  <tr>
   <td><b>Year-month:</td><td><input class="input"                
                                     type="text"                    
                                     name="ym"                        
                                     id="ym"                    
                                     maxlength="7"                  
                                     size="10"                      
                           pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2]))" 
                                     placeholder="yyyy-mm"></td>

   <td><b>Lot:</td><td><input class="input"                       
                              type="text"                          
                              name="lot"                             
                              id="lot"                          
                              maxlength="1"                         
                              size="10"                             
                              pattern="[1-7]{1}"           
                              placeholder="Lot"></td>
 </tr>
 <tr>
  <td><b>Page-no:</td><td><input class="input"                    
                                 type="text"          
                                 name="pn"  
                                 id="pn"                        
                                 maxlength="5"              
                                 size="10"    
                                 pattern="[0-9]{5}"         
                                 placeholder="Page Number"></td>

  <td><b>Page-Total:</b></td><td><input class="input"             
                                        type="text" 
                                        name="pt"                     
                                        id="pt"                 
                                        maxlength="5"               
                                        size="10"                   
                                        pattern="[0-9]{2}"  
                                        placeholder="Page Total"></td>
   </tr>
  </table>
  
  <button onclick='var myVar=""; var el = document.getElementsByTagName("input"); if (el[0].validity.valid == true && el[0].value !== ""){ }else{ myVar += "year-month incorrect" } if(el[1].validity.valid == true && el[1].value !== ""){ }else{ myVar += "<br>loot incorrect" }if (el[2].validity.valid == true && el[2].value !== ""){ }else{ myVar += "<br>page number incorrect" } if (el[3].validity.valid == true && el[3].value !== ""){ }else{ myVar += "<br>page-total incorrect" } console.log(myVar);'>
submit
</button>
  
 </body>
 </html>

我刚刚用javascript创建了一个按钮，在代码的底部看到它。

我想在每个输入中使用HTML innerText

2 个答案: