Question

请查看下面的jsfiddle链接：

http://jsfiddle.net/H49EC/1/

正如您所看到的那样，它是两个搜索框，下方有一个按钮。我怎么能拥有它，所以文本在每个框中，但是当单击每个框时，文本消失了？

此外，如果单击该框但未输入任何内容，则会再次显示该文本。

谢谢大家，我一直在搜索，但我不确定这个名称是什么，或者需要使用哪种语言。

再次感谢！

詹姆斯

Answer 1

在输入中使用占位符属性。

<input type='text' placeholder='whatever' />

Answer 2

如果您使用的是HTML5，则可以使用新的placeholder=""属性：

placeholder="Your text here"

http://jsfiddle.net/H49EC/2/

如果您不使用HTML5，可以使用jQuery更改值:(对于旧浏览器和IE）

$('input').focus(function(){        
            // on focus if the value of the field is still the initial then clear it        
            if ( (this.value) == this.defaultValue ) this.value = '';    }).blur(function(){        
            // on blur if the value is still cleared then restore the initial        
            if ( (this.value) == '' )   this.value = this.defaultValue;    })

http://jsfiddle.net/H49EC/7/

Answer 3

如果您需要支持旧浏览器且无法使用HTML5 placeholder属性，则需要使用JavaScript。这些方面的东西应该让你开始：

var input = document.getElementById("input1");
input.onfocus = function() {
    if(this.value === "Default") {
        this.value = "";  
    }
};
input.onblur = function() {
    if(this.value === "") {
        this.value = "Default"; 
    }  
};

这是一个updated fiddle，向您展示它是如何工作的。请注意，我已在id元素中添加了input，因此可以使用getElementById访问该元素。如果要将其应用于多个输入元素，您可能需要对其进行概括，而不是仅将其应用于一个元素。

Answer 4

我使用infieldlabel在页面上完成此操作并且效果很好。不过，它是一个jQuery插件。

Answer 5

你是说占位符吗？ http://jsfiddle.net/H49EC/4/

Answer 6

此链接提供对占位符属性的支持。

目前还不完全符合浏览器标准，IE是主要问题。

http://davidwalsh.name/html5-placeholder-css

对于IE，人们会在他们之上制作div，当你点击它时隐藏。通过在占位符中键入谷歌有很多选项：）

希望这有帮助！

Answer 7

占位符是您正在寻找的。

<input type="text" name="searchText" placeholder="Search Here!" />

有关占位符属性的信息，请参阅W3Schools。

here's a quick jsFiddle。

如何在输入中输入文本并在焦点上关闭？

7 个答案: