Question

我还没有找到一个很好的方法来做到这一点，所以我想我会问这里 - 我有一个带有预定义值的文本输入搜索表单字段（搜索...）。当用户聚焦时，我想清除该值，当它们模糊时，它应该重置文本。我一直在使用javascript，但我使用的方法似乎是很多代码没有多少回报，我也一直把代码放在元素的“onclick”处理程序中，我想通过保留所有内容来避免jQuery的。如果有人有任何好的方法，请告诉我。谢谢！

Answer 1

首先，对支持它的任何浏览器使用placeholder属性。

然后，检查属性是否受支持;如果没有，请使用此回退：

$('input[placeholder]').focus(function(ev){ 
  var $this = $(this);
  if ($this.val() === $this.attr('placeholder')) $this.val('');
}).blur(function(ev){
  var $this = $(this);      
  if ($this.val() === '') $this.val($this.attr('placeholder'));
});

Answer 2

听起来你只是使用占位符正确吗？为什么不查看像jQuery Placeholder这样的插件。我正在将它用于一个项目并且效果很好。

Answer 3

两件事：

1）HTML5有一个占位符属性，基本上做同样的事情。这适用于现代浏览器（FF5 +，Chrome，Safari等），但不适用于IE。你可以这样做：

    <input type="text" name="title" placeholder="Enter a title here"/>

这显示了一些灰色的文字，上面写着“在这里输入标题”。当该字段被聚焦时，它会删除文本，允许用户键入。

2）您可以使用简单的jQuery脚本为不支持它的浏览器执行相同的操作。我推荐使用jQuery的Placeholder插件（http://plugins.jquery.com/project/input-placeholder），但您可以自己轻松地重新创建它，如下所示：

    $('input[placeholder]').live('focus', function() {
        $(this).val('');
    });
    $('input[placeholder]').live('blur', function() {
        var placeholder = $(this).attr('placeholder');
        $(this).val(placeholder);
    });

这应该可以原样或稍作修改。

祝你好运。：）

Answer 4

//run code on document.ready event
jQuery(function ($) {
    //bind event handlers to the `focus` and `blur` events for a form input
    $('#id_of_text_input').bind('focus', function () {
        //cache this form input for speedier manipulations
        var $this = $(this);
        //if the value of this text input is the placeholder, then make it's value blank
        if ($this.val() == 'Search...') {
            $this.val('');
        }
    }).bind('blur', function () {
        var $this = $(this);
        //if the value of this text input is blank then make it the placeholder text
        if ($this.val() == '') {
            $this.val('Search...');
        }
    });
});

如果它是焦点输入中的唯一文本，则会删除占位符，如果在模糊输入中没有输入文本，则会添加占位符。

Answer 5

尝试

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
    $(function(){
        var txt = 'Please write something';
        if($(':input#mytxtbox').val()==''){
            $(':input#mytxtbox').val(txt);
        }

        $(':input#mytxtbox').blur(function(){
            if($(this).val() == ''){
                $(this).val(txt);
            }

        }).focus(function(){
            if($(this).val() == txt){
                $(this).val('');
            }
        });
    });
</script>

<input id="mytxtbox" type="text" name="xyz" value=""/>

Answer 6

就演示而言，数学的答案是有效的。但是有人想到这个值提交时的含义吗？

这个jQuery插件是一个很好的解决方案，因为它处理功能搜索表单的表示和实用性：https://code.google.com/p/jquery-placeholder-js/

除非您希望人们搜索“占位符”一词，否则我无法在那里看到任何可用性优势;）

JQuery - 清除和重置焦点和模糊的预定义字段输入数据

6 个答案: