Question

我想更改输入框的颜色，如果写入一定数量的字符（例如，如果有超过＆gt; 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" />

HTML / CSS - 如果输入了特定数量的字符，则更改输入框的颜色

3 个答案: