Javascript 如何在焦点上显示/隐藏输入值？

我在网上到处都能看到这一点，但我想知道是否有人有JavaScript代码，可以最简单地在模糊上显示输入值，但隐藏在焦点上。

这就是我在模糊上使用的。只要去那里看看后面的源代码就行了

function displaySearchText(text){
    var searchField = document.getElementById('searchField');
    if(searchField != null)
        searchField.value = text;
}

您的输入字段应如下所示：

<input id='searchField' name='q' onblur='displaySearchText("Search...");' onfocus='displaySearchText("");' onkeydown='performSearch(e);' type='text' value='Search...'/>

---

据我所知，最简单的方法如下：

<input 
    name="tb" 
    type="text" 
    value="some text"
    onblur="if (this.value=='') this.value = 'some text'" 
    onfocus="if (this.value=='some text') this.value = ''"  /> 

---

如果不关心有效的HTML，则使用

占位符

属性。它将在Safari上开箱即用，您可以添加一些不引人注目的JS来模拟其他浏览器中的这种行为

更多阅读：

• （JS实施）

和谷歌

---

该解决方案类似于Josh Stodola发布的解决方案，但它更灵活、更通用。

这对我来说一直很有效：

<input 
    type="text" 
    value="Name:"
    name="visitors_name" 
    onblur="if(value=='') value = 'Name:'" 
    onfocus="if(value=='Name:') value = ''"
 />

我更喜欢jQuery方式：

$(function(){
    /* Hide form input values on focus*/ 
    $('input:text').each(function(){
        var txtval = $(this).val();
        $(this).focus(function(){
            if($(this).val() == txtval){
                $(this).val('')
            }
        });
        $(this).blur(function(){
            if($(this).val() == ""){
                $(this).val(txtval);
            }
        });
    });
});

---

Zack Perdue对其进行了修改。

因为这在google上仍然出现，我想指出，在HTML 5中，您可以使用带有输入的占位符属性在一段HTML中实现这一点

<input type="text" id="myinput" placeholder="search..." />

---

占位符现在是现代浏览器的标准，因此这确实是首选方法。

适用于所有浏览器：

<input onfocus="if(this.value == 'Your value') { this.value = '';}" onblur="if(this.value == '') { this.value = 'Your value';}" value="Your value" type="text" name="inputname" />

<input type="text" name="inputname" placeholder="Your value" />

对于最新版本的浏览器：

<input onfocus="if(this.value == 'Your value') { this.value = '';}" onblur="if(this.value == '') { this.value = 'Your value';}" value="Your value" type="text" name="inputname" />

<input type="text" name="inputname" placeholder="Your value" />

嗯？你说的表演是什么意思？你到底想做什么？所以输入内容里面会有“搜索…”之类的内容，当你点击输入时，它会变成空白。我相信我已经有了答案，但还是要谢谢你，伊恩！=]看，我想不关心有效的HTML永远都不好，不是吗？此外，仅针对一个浏览器进行优化…验证程序只是一个工具。只要知道自己在做什么，就可以忽略它的输出。而且为即将到来的标准进行优化也没那么糟糕：）