input输入内容成可点击状态

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" name="username">
  <input id="sub" type="submit" disabled>
</body>
</html>
if(!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g,'');
  };
}

// var dom=document.querySelector("[name=username]");
// var btn=document.querySelector("#sub");

// dom.addEventListener("input",function(e){
//   if(this.value.trim().length){
//     btn.removeAttribute("disabled");
//   }else{
//     btn.disabled="disabled";
//   }
  
// },false);


//jquery version
$("input[name=username]").on("input",function(evt){
  if($(this).val().trim().length){ //判断input中的内容是否为空
    
    $("#sub").removeAttr("disabled");
  }else{
    $("#sub").prop("disabled","disabled");
  }
});

 

posted @ 2017-05-15 10:21  chillylight  阅读(1197)  评论(0编辑  收藏  举报