-2

大家好，我想要一个具有默认文本的html示例，当用户单击文本框时，它会消失，我希望它仅在javascript中。下面是我的 html 代码，我怎么能在这里使用 javascript 呢？所以请所有的java脚本专家我需要你的帮助

<html>
  <body bgcolor="black">
    <form method="get" action ="http://localhost:2013">
      <center>
        <font color="white" size=65>Enter Word: <input type="text" name="word"></font>
      </center>
      </br>
      <center>
        <font color="Green" size=65>
          <input type="submit" value="SUBMIT">
        </font>
      </center>
    </form>
  </body>
</html>

任何帮助都会有很大帮助。提前致谢。

4

1 回答 1

1

完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    input { color:#333; }

input:focus { color:#ccc;transition:color .2s linear 0;
              -webkit-transition:color .2s linear 0;
    -moz-transition:color .2s linear 0 }
input.typing { color:#333; }

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){
    var input = $('input[name="word"]'), defaulttext = input.attr('data-default');

    input.val(input.attr('data-default'));

    input.on('focus', function(){
        if(input.val() != defaulttext)
            input.addClass('typing');
        else
            input.removeClass('typing');

    }).on('keydown', function(){        
        if(defaulttext == input.val()) input.val('');

        input.addClass('typing');
    }).on('blur', function(){
        if(input.val() == '') input.val(defaulttext);

        that.removeClass('typing');
    });


});

});//]]>  

</script>


</head>
<body bgcolor="black">
     <form method="get" action ="http://localhost:2013">
      <center>
        <font color="white" size=65>Enter Word: <input type="text" name="word" data-default="Default Text"></font>
      </center>
      </br>
      <center>
        <font color="Green" size=65>
          <input type="submit" value="SUBMIT">
        </font>
      </center>
    </form>

</body>


</html>
于 2013-06-28T06:43:32.297 回答