-1

需要对下面的代码进行修改，当我测试此代码时它工作正常但是，发生的事情是当用户单击提交按钮时，默认值会传播，说默认值是用户名，然后当用户没有在文本框中输入任何内容时默认值仅作为“用户名”传递。但是我想要的是当用户没有输入任何内容（即空值）时应该得到的值是一个空白值，尽管文本框可能会显示默认值（即用户名）。下面是相同的代码：

<FORM action="http://localhost:2013" method="post">
<INPUT type="text" size="25" value="Username" onFocus="if(this.value == 'Username') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Username';}" />
<INPUT type=submit value=Submit>
</FORM>

所以基本上我希望显示名称仅用于“显示”目的，当用户将光标放入文本框中时，所有内容都会被清除，但如果他没有输入任何空值。

4

3 回答 3

1

由于这只是为了增加用户体验，如果您不关心旧浏览器并且您只是针对新浏览器，请使用以下 HTML5 技巧：

<INPUT type="text" size="25" placeholder="Username" />

用您的原始标签替换上面的标记input。

或使用它代替您的form标签：

<FORM action="http://localhost:2013" method="post" onsubmit='if (document.getElementsByName ("username")[0].value == "Username") document.getElementsByName ("username")[0].value = ""'>

还要name='username'在您的用户名input标签中添加一个！

于 2013-06-28T08:50:30.933 回答
1

编辑代码以匹配您需要的内容：

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

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>


  <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(){
$("#submit").click(function (){
    if($("#text").val()=="username")
    { $("#text").val("");}

 });
$(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 >
     <form method="get" action ="">

        <input type="text" id="text" name="word" data-default="username"></font>

      </br>


          <input type="submit" value="SUBMIT" id="submit">


    </form>

</body>


</html>
于 2013-06-28T08:24:35.783 回答
1

如果您使用的是 HTML5

使用占位符

<input type="text" placeholder="Username">

如果你不能使用 HTML5 这个插件可能对你有用

http://onwebdev.blogspot.co.uk/2011/11/jquery-emulating-placeholder-attribute.html

于 2013-06-28T08:28:56.380 回答