请问怎么实现当输入框无内容时按钮为灰色，当输入内容时按钮就变正常？

请问怎么实现当输入框无内容时按钮为灰色，当输入内容时按钮就变正常？
然后我的按钮是用图片作为背景~上面打字的~~
默认的时候是一个灰色的背景图和灰色字体不可点~~当输入框输入用户名密码验证码以后就换成另外一张背景图和有颜色的字体，可点击~~
请大家多多帮助！！谢谢～在线等~~

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="ru">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript">

    window.onload =function()
    {
    document.getElementById("bt").disabled=true;

    //密码框失去焦点时判断。验证码自己加吧。
    document.getElementById("password").onblur = function()
    {
    if(document.getElementById("username").value==""||this.value=="")
    {
    document.getElementById("bt").disabled=true;
    }else
    {
    document.getElementById("bt").disabled=false;
    }
    }
    }
    </script>
    </head>
    <body>
    用户名：<input type="text" name="username" id="username" /><br>
    密码：<input type="password" name="password" id="password" />
    <input type="submit" id="bt" value="提交" />
    </body>
    </html>
      

  2.   

    我需要把input按钮改成图片行吗？
    默认的时候是一个灰色的背景图和灰色字体不可点~~当输入框输入用户名密码验证码以后就换成另外一张背景图和有颜色的字体，可点击~~
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="ru">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript">

    window.onload =function()
    {
    document.getElementById("bt").style.backgroundImage ="url(bg1.gif)";

    //密码框失去焦点时判断。验证码自己加吧。
    document.getElementById("password").onblur = function()
    {
    if(document.getElementById("username").value==""||this.value=="")
    {
    document.getElementById("bt").style.backgroundImage ="url(bg2.gif)";
    document.getElementById("bt").innerHTML="不可点击";
    document.getElementById("bt").onclick=function(){return false;};
    }else
    {
    document.getElementById("bt").style.backgroundImage ="url(bg2.gif)";
    document.getElementById("bt").innerHTML="可点击";
    document.getElementById("bt").onclick=function(){alert("hello");};
    }
    }
    }
    </script>
    </head>
    <body>
    用户名：<input type="text" name="username" id="username" /><br>
    密  码：<input type="password" name="password" id="password" /><br>
    <div id="bt" >不可点击</div>
    </body>
    </html>
      

  4.   

    这样好点吧。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="ru">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript">

    window.onload =function()
    {
    document.getElementById("bt").style.backgroundImage ="url(bg1.gif)";

    //鼠标悬停在按钮上时判断。验证码自己加吧。
    document.getElementById("bt").onmouseover = function()
    {
    if(document.getElementById("username").value==""||document.getElementById("password").value=="")
    {
    document.getElementById("bt").style.backgroundImage ="url(bg1.gif)";
    document.getElementById("bt").innerHTML="不可点击";
    document.getElementById("bt").onclick=function(){return false;};
    }else
    {
    document.getElementById("bt").style.backgroundImage ="url(bg2.gif)";
    document.getElementById("bt").innerHTML="可点击";
    document.getElementById("bt").onclick=function(){alert("hello");};
    }
    }
    }
    </script>
    </head>
    <body>
    用户名：<input type="text" name="username" id="username" /><br>
    密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="password" /><br>
    <div id="bt" style="width:100px">不可点击</div>
    </body>
    </html>
      

  5.   

    换成图片按钮可以啊 <input type="image" src="aa.jsp" id="aa" name="aa" value="test" >我觉得输入框无内容时变灰 有内容是正常 
    是不是应该使用onchange="" 事件更好一点！