按钮置灰;按钮随文本框内容的有无而变色

最新推荐文章于 2023-02-03 17:47:16 发布

weixin_30347335

最新推荐文章于 2023-02-03 17:47:16 发布

阅读量226

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangduojing/p/8037483.html

版权

试过原生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>

转载于:https://www.cnblogs.com/wangduojing/p/8037483.html

weixin_30347335

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
按钮置灰;按钮随文本框内容的有无而变色

试过原生js的监听,非但IE有兼容,而且监听只有一次的效果,还是技术不行;最后改用jq得以解决.代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title<...
复制链接

扫一扫