Question

我有以下jQuery代码：

$(".SearchForm input:text").each(function(){        
    /* Sets the current value as the defaultvalue attribute */
    if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "")
    {
        $(this).attr("defaultvalue", $(this).val());
        $(this).css("color","#9d9d9d");


        /* Onfocus, if default value clear the field */
        $(this).focus(function(){               
            if($(this).val() == $(this).attr("defaultvalue"))
            {
                $(this).val("");
                $(this).css("color","#4c4c4c");
            }
        });

        /* Onblur, if empty, insert defaultvalue */
        $(this).blur(function(){
            alert("ud");

            if($(this).val() == "")
            {   
                $(this).val($(this).attr("defaultvalue"));                  
                $(this).css("color","#9d9d9d");
            }else
            {
                $(this).removeClass("ignore");

            }   
        }); 

    }

});

我使用此代码将一些默认文本插入到我的某些输入字段中，而不输入任何其他内容。这意味着当用户看到我的搜索表单时，默认值将被设置为输入的属性 - 字段，这将是显示的值。当用户在输入字段内部单击时，将删除默认值。

当用户首先看到输入字段时，如下所示：

<input type="text" value="" defaultvalue="From" />

这很好用，但我有一个很大的挑战。如果用户已发布表单，并在其中一个字段中输入了某些内容，则如果用户从输入字段中删除文本，则无法在字段中显示默认值。发生这种情况是因为即使用户删除了内容，文本字段的值仍然包含某些内容。所以我的问题是如何在提交表单时显示默认值，然后用户删除输入的内容？

当提交表单时，输入看起来像这样，并且在表单再次提交之前一直保持这样：

<input type="text" value="someValue" defaultvalue="From" />

所以我需要在用户删除字段中的内容后立即在输入字段中显示默认值，并从字段中删除焦点。

每个人都明白我的问题是什么吗？否则就问一下，我现在已经挣了很长时间，所以任何帮助都会非常感激。

提前致谢，金安德森

Answer 1

您正在将defaultvalue属性分配给代码第3-5行中的当前值。第2行的评论甚至告诉你你在做什么。

/* Sets the current value as the defaultvalue attribute */
if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "")
{
    $(this).attr("defaultvalue", $(this).val());

问题是即使输入的当前值为空（“”），您也要输入此块。发生这种情况时，您将defaultValue更新为空白。尝试评论该任务，或者甚至可以将所有最外面的if语句全部放在一起。我还建议使用类来更改焦点输入字段的文本颜色。或者只是在你的CSS中使用：focus伪类。

// in your css
.SearchForm input { color: #9d9d9d; }
.SearchForm input.focused,
.SearchForm input:focus { #4c4c4c; }


$(".SearchForm input:text")
    //.unbind('focus').unbind('blur') // uncomment if playing in the console
    .focus(function () {
        var $this = $(this);
        if ($this.val() == $this.attr("defaultvalue")) 
        {
            $this.val("")
                 //.addClass('focused');
        }
    })
    .blur(function () {
        var $this = $(this);
        if ($this.val().trim() == "") 
        {
            $this.val($this.attr("defaultvalue"));
        }
        //$this.removeClass('focused');
    });

注意：焦点不适用于IE＆lt; 8我觉得IE6很难搞清楚如何处理多个课程。因此，如果您试图通过在代码中直接添加和删除css颜色来保持IE6友好棒。

Answer 2

我想我会在搜索字段中执行您正在寻找的内容。这是功能的脚本，显示搜索直到框具有焦点，当它失去焦点并且字段仍然是空白时我将搜索放回到那里。

$('#nav-search-box').addClass("idleField").focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue) {
this.value = '';
}
if (this.value != this.defaultValue) {
this.select();
}
}).blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == '') {
this.value = (this.defaultValue ? this.defaultValue : '');
}
}).keypress(function(e) {
if (e.which == 13) {
window.location = "/search/" + $(this).val();
}
});

如果你想删除帖子上的字段文本，那么只需禁用表单帖子并添加按钮点击处理程序或类似的东西。

function disableFormPost()
{
    $("#formid").submit(function() { return false });
}

如果删除了输入文本，则插入默认值

2 个答案: