我想在每個輸入中使用HTML innerText

我希望每個輸入中都有HTML innerText，當它有效且無效時。請遵循以下HTML代碼，我希望innerText分別對有效和無效輸入說有效和無效。如果我不清楚，請發表評論。我想在每個輸入中使用HTML innerText

<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>

來源

2017-07-14 Bhardwaz Chetry

我不明白。你想讓每個輸入都具有innerText的值嗎？或者你想獲得每個輸入的inputText？ –

不明白你到底想要做什麼。 – Ananya

你不清楚。 'innerText'是什麼意思？ – norin89

你要這樣呢？

$(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

希望幫助，

來源

2017-07-14 11:11:53 Berkay

這可能是你想要什麼：

.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一個按鈕，看到它代碼的底部。

來源

2017-07-14 11:21:40

我想在每個輸入中使用HTML innerText

回答

相關問題