如何显示焦点/隐藏输入值?(How to show/hide input value on focu

2019-07-29 14:02发布

我看到这一切在网上,但想知道是否有人有上显示模糊输入值的最简单方法的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可以使用占位符属性与输入一件HTML来实现这一点。

<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);
            }
        });
    });
});

它被修改隐藏表单输入的值在对焦使用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模仿其他浏览器这种行为。

更多阅读:

  • http://www.beyondstandards.com/archives/input-placeholders/ (JS实现)
  • http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

和谷歌。 ;-)

该解决方案是一个类似于乔希斯托多拉发布,但它更灵活,更具有普遍性。



Answer 6:

这是我上使用我的博客 。 刚去那里,后面签出源代码。

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


文章来源: How to show/hide input value on focus?