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

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的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

这就是我在博客上使用的。只要去那里查看后面的源代码即可。

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