按钮置灰;按钮随文本框内容的有无而变色
试过原生js的监听,非但IE有兼容,而且监听只有一次的效果,还是技术不行;最后改用jq得以解决.
代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .typecon{ 8 margin: auto; 9 width: 60%; 10 text-align: center; 11 } 12 .typecon .type_c1 input{ 13 font-size: 12px; 14 line-height: 40px; 15 width:60%; 16 height: 40px; 17 font-size: 16px; 18 color: #000; 19 text-align: center; 20 margin-bottom:10px; 21 border:1px solid #666; 22 -webkit-border-radius: 4px; 23 -moz-border-radius: 4px; 24 border-radius: 4px; 25 } 26 .typecon .type_c1 .txtsao input{ 27 float: left; 28 margin-left: 20%; 29 } 30 .typecon .type_c1 .txtsao p{ 31 color: #2794ef; 32 width: 10%; 33 line-height: 40px; 34 font-size: 12px; 35 text-align: right; 36 margin-bottom: 10px; 37 cursor: pointer; 38 float: left; 39 } 40 .typecon .type_c1 .btn_sao{ 41 background: #666; 42 color: #fff; 43 cursor: pointer; 44 } 45 </style> 46 </head> 47 <body> 48 <div class="typecon"> 49 <div class="type_c"> 50 <div class="type_c1" id="sao1"> 51 <div class="txtsao"> 52 <input id="txt_sao" type="text" placeholder="请输入授权码"> 53 <p id="clear">清空</p> 54 </div> 55 <input id="btn_sao" class="btn_sao" type="button" value="手动核销"> 56 </div> 57 </div> 58 </div> 59 </body> 60 <script src="jquery.js"></script> 61 <script> 62 //首页党点击扫一扫二维码 清除和按钮的灰置 63 var oClear = document.getElementById("clear"); 64 var txtSao = document.getElementById("txt_sao"); 65 var btnSao = document.getElementById("btn_sao"); 66 67 oClear.onclick = function () { 68 txtSao.value = ""; 69 $('#btn_sao').css('background','#666'); 70 } 71 $(function(){ 72 $('#txt_sao').bind('keyup',function(){ 73 74 if( $('#txt_sao').val().length>0){ 75 76 $('#btn_sao').css('background','#2794ef'); 77 }else{ 78 $('#btn_sao').css('background','#666'); 79 } 80 }) 81 }) 82 83 </script> 84 </html>
