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

Posted 2023-03-15

【中文标题】如果输入文本被删除，则插入默认值

【英文标题】：Insert default value if input-text is deleted

【发布时间】：2011-02-28 14:01:23

【问题描述】：

我有以下 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" />

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

大家都明白我的问题是什么吗？否则就问吧，我已经为此苦苦挣扎了很长时间，所以任何帮助都将不胜感激。

提前致谢， 金安徒生

【参考方案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');
    );

注意：:focus 不适用于 IE

【参考方案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 );