5

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

4

7 回答 7

17

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

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

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

于 2012-08-13T14:38:30.757 回答
17

这一直对我有用：

<input 
    type="text" 
    value="Name:"
    name="visitors_name" 
    onblur="if(value=='') value = 'Name:'" 
    onfocus="if(value=='Name:') value = ''"
 />
于 2011-03-23T12:17:18.283 回答
7

我更喜欢 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。

于 2012-08-09T12:12:52.313 回答
5

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

<input 
    name="tb" 
    type="text" 
    value="some text"
    onblur="if (this.value=='') this.value = 'some text'" 
    onfocus="if (this.value=='some text') this.value = ''"  />
于 2009-07-03T05:33:46.310 回答
1

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

更多阅读：

和谷歌。;-)

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

于 2009-07-03T05:42:08.093 回答
0

对于所有浏览器：

<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" />
于 2014-04-26T03:46:08.937 回答
0

这是我在我的博客上使用的。去那里看看后面的源代码。

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...'/>
于 2009-07-03T05:30:49.727 回答