Question

我在以下页面中遇到了一些错误：http://jsbin.com/agedu/ 包含一些评论的源代码：http://jsbin.com/agedu/edit

问题在于，在输入内容并进行查询以显示搜索结果时，如果我回到浏览器中的搜索页面（Firefox 3.5，但与IE8相同），则不再有我的搜索条件。

它被灰色文字取代。这个灰色文本，我只想在没有任何填充文本的情况下拥有。

当我删除jQuery代码时，如果我进行一些搜索并按下浏览器上的“返回”按钮，则填充的文本仍然存在。

即使使用此示例页面：http://mucur.name/system/jquery_example/

如果我写了一些文字，在地址栏中加载一些其他网址，然后按回复按钮，填充的文字仍然存在，而不是我的代码。

所以我的问题是：你知道如何填写这个文本吗？

应该有一种方法可以检测输入是否已填满，如果是，则避免替换文本。

它可能来自浏览器以及它们如何处理JavaScript但我不确定。

Answer 1

哇，调试这个花了很长时间，我认为你应该使用val方法而不是'value'属性。

无论如何，有问题的一行就是这个

$(this).attr('value', hvalue).addClass(opts.hclass).unbind('focus blur').bind('focus',

在上面的行中，当您指定属性“value”时，实际上是在更改文本框的值。只有在非空时才应更改它。

我稍微改变了你的代码，到处使用val（）方法，它按预期工作。

工作演示：http://jsbin.com/ihegu/

[注意当您在Google上搜索某些内容并点击后退按钮时，该演示如何正确地显示“维基百科”文本。]

 (function($) { 
    $.fn.inputdynvalue = function(options) 
    { 
        var opts = $.extend({}, 
        $.fn.inputdynvalue.defaults, options); 
        return this.each(function() 
            { 
            var hvalue = opts.htext; 
            switch (opts.htext) 
            { 
                case 'title': 
                    hvalue = $(this).attr('title'); 
                    break; 
                case 'value': 
                    hvalue = $(this).val();
                    break; 
            } 

            //Modify the text value ONLY if it's non empty. 
            if($(this).val() === '')
            {
               $(this).val(hvalue);
            }  

            //If title and value is same, apply the grey text class.
            if($(this).val() === this.title)
            {
               $(this).addClass(opts.hclass);
               //Why do you unbind the event?
            };

            $(this).bind('focus', 
            function() { 
                if ($(this).val() === this.title) { 
                    $(this).val('');
                    $(this).removeClass(opts.hclass); 
                } 
            });

            $(this).bind('blur', 
            function() { 
                if ($(this).val() === '') { 
                    $(this).val(this.title);
                    $(this).addClass(opts.hclass); 
                } 
            }); 
        }); 
    }; 
    $.fn.inputdynvalue.defaults = { 
        htext: 'title', 
        hclass: 'hint' 
    }; 
})(jQuery); 
$(document).ready(function() { 
    $("input[type='text']").inputdynvalue(); 
});

Answer 2

inputdynvalue（）函数在调用时显式强制文本框文本，即使文本框非空。

修复如下：

 (function($) {
    $.fn.inputdynvalue = function(options) {
        var opts = $.extend({},
        $.fn.inputdynvalue.defaults, options);
        return this.each(function() {
            var hvalue = opts.htext;
            switch (opts.htext) {
            case 'title':
                hvalue = $(this).attr('title');
                break;
            case 'value':
                hvalue = $(this).attr('value');
                break;
            }
            if (this.value === '') {
              $(this).attr('value', hvalue).addClass(opts.hclass)
            }
            $(this).unbind('focus blur').bind('focus',
            function() {
                if (this.value === this.title) {
                    this.value = '';
                    $(this).removeClass(opts.hclass);
                }
            }).bind('blur',
            function() {
                if (this.value === '') {
                    this.value = this.title;
                    $(this).addClass(opts.hclass);
                }
            });
        });
    };
    $.fn.inputdynvalue.defaults = {
        htext: 'title',
        hclass: 'hint'
    };
})(jQuery);

关键是线：

        if (this.value === '') {
          $(this).attr('value', hvalue).addClass(opts.hclass)
        }

替换之前的非条件覆盖。

固定版本可以在http://jsbin.com/ikipi看到。

Answer 3

当您初始化插件时，您设置了重置输入的值，我只是重构了一下并添加了以下检查：

        if (this.value === '' || this.value === hvalue){
          $(this).attr('value', hvalue).addClass(opts.hclass);
        }

我将这些操作与焦点事件连接链分开。

现在它只会设置默认值（hvalue）和默认灰色类（hclass），如果元素值为''或者它具有默认值。

检查您的代码段here。

Answer 4

在IE8和FF中测试

这是从源复制并修改的。

我在一段时间内用简单的旧js制作了一个幻影文本控件，在jQuery中查看它让我想回去重写它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr"> 

<!--

  Created using http://jsbin.com
  Source can be edited via http://jsbin.com/oxeye/edit

-->

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<style type="text/css"> 
   .hint { 
    color: #C0C0C0; 
} 
</style> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>Test</title>
</head> 
<body> 

<form action="http://www.google.com/search?&q="> 
 <div class="saisie"> 
  <input type="text" id="lr_text" name="q" title="Google" />  
  <button type="submit">OK</button> 
 </div> 
 <div class="options"> 
  <label for="lang_en"><input type="radio" checked="checked" id="lang_en" name="lr" title="English Google" />English</label> 
    <label for="lang_fr"><input id="lang_fr" type="radio" name="lr" title="French Google" />French</label> 
  <label for="lang_de"><input id="lang_de" type="radio" name="lr" title="German Google" />German</label> 
  <label for="lang_es"><input id="lang_es" type="radio" name="lr" title="Spanish Google" />Spanish</label> 

 </div> 
</form> 
<form method="post" action="http://en.wikipedia.org/wiki/Special:Search?search="> 
 <div class="saisie"> 
  <input type="text" id="wikipedia_text" name="champ_wikipedia" title="Wikipedia" /> 
   <button type="submit">OK</button> 
 </div> 
 <div class="options"> 
 <label for="wik_en"><input type="radio" checked="checked" name="wikipedia" id="wik_en" title="English Wikipedia" />English</label> 
  <label for="wik_fr"><input type="radio" name="wikipedia" id="wik_fr" title="French Wikipedia" />French</label> 
 <label for="wik_de"><input type="radio" name="wikipedia" id="wik_de" title="German Wikipedia" />German</label> 
 <label for="wik_es"><input type="radio" name="wikipedia" id="wik_es" title="Spanish Wikipedia" />Spanish</label> 
 </div> 
</form> 

<script type="text/javascript">
    $(document).ready(function() {
        function setText() {
            var kf = this.title.split('|');
            if (kf.length < 0) return;
            if ($('#' + this.name + '_text').hasClass('hint')) {
                $('#' + this.name + '_text').val(kf[0]).addClass('hint');
            }
            $('#' + this.name + '_text').attr('title', kf[0]);
        }

        $("input[type='text']").inputdynvalue();
        $("input[type='radio']").click(setText);
    });

(function($) {
    $.fn.inputdynvalue = function(options) {
        var opts = $.extend({},
        $.fn.inputdynvalue.defaults, options);
        return this.each(function() {
            var hvalue = opts.htext;
            switch (opts.htext) {
                case 'title':
                    hvalue = $(this).attr('title');
                    break;
                case 'value':
                    hvalue = $(this).attr('value');
                    break;
            }
            //if value == title change class to 'hint'
            if ($(this).attr('value') == $(this).attr('title')) {
                $(this).addClass(opts.hclass);
            }
            $(this).attr('value', hvalue).unbind('focus blur').bind('focus',
            function() {
                if (this.value === this.title) {
                    this.value = '';
                    $(this).removeClass(opts.hclass);
                }
            }).bind('blur',
            function() {
                if (this.value === '') {
                    this.value = this.title;
                    $(this).addClass(opts.hclass);
                }
            });
        });
    };

    $.fn.inputdynvalue.defaults = {
        htext: 'value', //changed to value
        hclass: 'hint'
    };
})(jQuery);
$(document).ready(function() {
    //Set hint
    $("input[type='text']").blur();
});
</script>
<script type="text/javascript">
                 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-1656750-13");
    pageTracker._trackPageview();
</script></body></html>

回到浏览器时，如何通过jquery删除一些输入文本？

4 个答案: