Question

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

Answer 1

这总是对我有用：

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

Answer 2

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

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

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

Answer 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。

Answer 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 = ''"  />

Answer 5

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

更多阅读：

谷歌。 ; - ）

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

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

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

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

7 个答案: