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

I see this all over the web, but was wondering if anyone has the JavaScript code for the EASIEST way to show input value on blur, but hide in on focus.

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

7 个解决方案

#1

This always worked for me:

这总对我有用:

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

#2

Since this still comes up on google, I'd like to point out that with HTML 5 you can use the placeholder attribute with an input to achieve this in one piece of html.

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

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

Placeholder is now standard across modern browsers, so this really would be the preferred method.

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

#3

I prefer jQuery way:

我更喜欢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);
            }
        });
    });
});

It is modified Hide Form Input Values On Focus With jQuery by Zack Perdue.

它被修改隐藏表格输入值焦点使用Zack Perdue的jQuery。

#4

The simplest approach I know of is the following:

我所知道的最简单的方法如下:

<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

If you don’t care about valid HTML, you use the placeholder attribute. It will work out of the box on a Safari, and you can add some unobtrusive JS to mimic this behavior in other browsers.

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

#6

This is what I use on my blog. Just go there and check out the source code behind.

这就是我在博客上使用的内容。只需去那里查看背后的源代码。

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

Your input field should look something like this:

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

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

#7

For all browsers:

对于所有浏览器:

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

For newest version of browsers:

对于最新版本的浏览器:

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

#1