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

【问题标题】：How to show/hide input value on focus?如何在焦点上显示/隐藏输入值？
【发布时间】：2010-11-07 20:24:49
【问题描述】：

我在整个网络上都看到了这一点，但想知道是否有人有 JavaScript 代码，以最简单的方式在模糊时显示输入值，但在焦点上隐藏。

【问题讨论】：

嗯？你说的秀是什么意思？你到底想做什么？
因此输入将在其中包含例如“搜索...”，当您单击输入时，它将变为空白。我相信我已经有了答案，但无论如何感谢伊恩！ =]
见stackoverflow.com/questions/1073428/…

【解决方案1】：

这一直对我有用：

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

【讨论】：

【解决方案2】：

由于这仍然出现在谷歌上，我想指出，在 HTML 5 中，您可以使用带有输入的占位符属性在一段 html 中实现这一点。

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

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

【讨论】：

【解决方案3】：

我更喜欢 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 修改 Hide Form Input Values On Focus With jQuery。

【讨论】：

【解决方案4】：

我知道的最简单的方法如下：

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

【讨论】：

【解决方案5】：

如果您不关心有效的 HTML，您可以使用 placeholder 属性。它可以在 Safari 上开箱即用，您可以添加一些不显眼的 JS 来模仿其他浏览器中的这种行为。

更多阅读：

还有谷歌。 ;-)

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

【讨论】：

我想不关心有效的 HTML 永远不会好，不是吗？此外，仅针对一种浏览器进行优化...
Validator 只是一个工具。只要您知道自己在做什么，就可以忽略它的输出。为即将到来的标准进行优化毕竟不是那么糟糕:)

【解决方案6】：

这是我在my blog 上使用的。去那里看看后面的源代码就行了。

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...'/>

【讨论】：

【解决方案7】：

适用于所有浏览器：

<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" />

【讨论】：