当输入11位正确手机号时，字体变成红色的写法？

Question

截图如下：

输入11位正确手机号后，字体变成红色，如下图：

长度已经做了限制，可如实现11为手机号后字体立马变红呢？难道真要写个定时器么？有没有更好的解决方案呢？

<input id="input_phone" type="text" placeholder="请输入手机号" maxlength="11">

Answer 1

监听 input 事件，针对输入的内容还得做 手机号验证，如果验证通过了，切换 样式class就好了.
下面是伪代码

var elInput = $('#input');
var elBtn = $('#btn');
var reg = /^[1][3,4,5,7,8][0-9]{9}$/;

elInput.on('input', function() {
  var val = this.value;
  if (reg.test(val)) {
    elBtn.addClass('red');
  } else {
    elBtn.removeClass('red');
  }
});

Answer 2

给input添加一个onkeyup事件，每次用户输入字符后触发，里面的逻辑是判断当前输入框长度，够11位设置后面文本变红。

Answer 3

目测一楼和二楼的方法皆有效果，主要看楼主想用哪种方法实现了，二楼连正确性检验都一并附上了。另外还有document.getElementById(" ").addEventListener("keyup", function(){});

Answer 4

给input绑定一个input事件即可，检测到输入的数据达到11位时，按钮则变为可点击状态。

<input type="tel" class="phone" placeholder="请输入手机号">

绑定事件：

document.querySelector('.phone').addEventListener('input', event=>{
    if( event.currentTarget.value.length>=11 ){
        alert( '发送验证码' );
    }
})