HTML/CSS - 如果輸入一定數量的字符，則更改輸入框的顏色

Question

如果寫入了一定數量的字符，我想更改輸入框的顏色（例如，如果有超過40個字符，輸入框邊框的顏色應該從綠色變爲紅色）。 我的HTML代碼：

<input type="text" name="inputbox" placeholder="Enter Text" value="" id="inputs"> 

CSS代碼：

#inputs { 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    -ms-border-radius: 3px; 
    -o-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-box-shadow: 0 1px 0 #FFF, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; 
    -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; 
    -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; 
    -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; 
    box-shadow: 0 1px 0 #FFF, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    background: #EAE7E7; 
    border: 1px solid #C8C8C8; 
    color: #777; 
    font: 13px Helvetica, Arial, sans-serif; 
    margin: 0 0 10px; 
    padding: 15px 10px 15px 40px; 
    width: 180px; 
    position: absolute; 
    top: 80px; 
    left: 140px; 
} 

#inputs:focus { 
    -webkit-box-shadow: 0 0 2px #228B22 inset; 
    -moz-box-shadow: 0 0 2px #228B22 inset; 
    -ms-box-shadow: 0 0 2px #228B22 inset; 
    -o-box-shadow: 0 0 2px #228B22 inset; 
    box-shadow: 0 0 2px #228B22 inset; 
    background-color: #FFF; 
    border: 1px solid #228B22; 
    outline: none; 
} 

謝謝支持！

Answer 1

使用該得到的長度：

http://api.jquery.com/length/

使用此觸發計數：

http://api.jquery.com/change/

Answer 2

試試這個：

的Javascript

window.onload = function() { 
    var main = document.getElementById('main'); 
    var className = main.className; 
    main.onkeydown = function (e) { 
     var el = e.currentTarget; 
     el.className = (el.value.length > 10) ? className + " newClass" : className; 
    } 
} 

CSS

.newClass{ 
    color: red; 
} 

Working Fiddle

Answer 3

試試吧Codepen example

的Javascript

var input = document.getElementsByClassName("b-input")[0]; 
    input.oninput = function() { 
     if(input.value.length >=4) { 
     if(!hasClass(this,"b-input_viewtype_error")) { 
      input.className += " b-input_viewtype_error"; 
     } 
     } 
     else { 
     input.className = "b-input"; 
     } 
    } 

    function hasClass(el, cls) { 
    return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className); 
    } 

CSS

.b-input.b-input_viewtype_error { 
    border:1px solid red; 
} 

HTML

<input type="text" class="b-input" />