Question

我有一个电子邮件注册和搜索框，框内有标签，IE邮箱在输入内部显示“注册”。当您在框中单击该值时，将删除该值以允许您输入电子邮件，如果您不输入任何内容并单击，则会显示“注册”。我使用以下代码：

$(function() {
    swapValues = [];
    $(".swap_value").each(function(i){
        swapValues[i] = $(this).val();
        $(this).focus(function(){
            if ($(this).val() == swapValues[i]) {
                $(this).val("");
            }
        }).blur(function(){
            if ($.trim($(this).val()) == "") {
                $(this).val(swapValues[i]);
            }
        });
    });
});

但是，我在控制台中收到以下错误，因此可能会遇到其他脚本问题。我完成调试后肯定会知道。

错误分配给未声明的变量swapValues

有更好的方法吗？ THX

Answer 1

我认为你还需要2个听众

    $('.swap_value').focus(function(){
      if($(this).val() == 'sign up'){
        $(this).val('');
      }
    }).blur(function(){
      if($(this).val() == ''){
        $(this).val('sign up');
      }
    });

我希望这能为您提供如何使用2个字段的示例：

<html>  
    <body>   
        <input type="text" value="sign up" class="swap_value singup"/>
        <input type="text" value="search" class="swap_value search"/>
    </body>
 </html>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
   //<!--
    $(document).ready(function(){
        $('.swap_value').focus(function(){
          if($(this).val() == 'sign up' || $(this).val() == 'search'){
            $(this).val('');
          }
        });
        $('.search').blur(function(){
          if($(this).val() == ''){
            $(this).val('search');
          }
        });
        $('.singup').blur(function(){
          if($(this).val() == ''){
            $(this).val('sign up');
          }
        });
    });
    //-->
</script>
</body>
</html>

Answer 2

这可能太晚了，但我让你的代码稍作修改：

var swapValues = [];

$('input.swap_value').each(function(i){

  swapValues[i] = $(this).attr('value');

  $(this)
    .focus(function(){
        if ( $(this).attr('value') == swapValues[i] ) {
            $(this).attr('value','');
        }
    })
    .blur(function(){
        if ( $(this).attr('value') == '' ) {
            $(this).attr('value', swapValues[i]);
        }
    });

});

基本上我现在使用.attr('value')代替.val()。我不确定这是不是你的问题，但上面的代码确认在一个页面上处理多个文本输入。

Answer 3

这是一个老问题，但是现在有很多新方法可以做到这一点。 HTML5中的placeholder属性涵盖了此功能，但IE9及更早版本和Opera Mini不支持此功能。

示例

<input type="email" placeholder="Sign Up" required>

请注意类型和必需属性。合并后，支持email类型的浏览器将对客户端进行有效电子邮件检查。不支持email类型的浏览器将呈现常规文本框。还有search类型提供＆＃34; x＆＃34;根据需要清除搜索字词。它还会在不受支持的浏览器中恢复为纯文本框。

如果您必须支持旧浏览器，则接受的答案可以作为后退。

交换文本输入值的更好方法是什么？

3 个答案: