输入字段中的默认文本

我不知道这是否有一个特殊的名称，但有没有一个很好的简单方法来设置输入字段中的默认文本，它会消失在焦点上，并在文本框为空时重新出现模糊？输入字段中的默认文本

来源

2011-02-01 oshirowanen

名称是占位符。现在它正式成为HTML（5）规范的一部分，所有现代浏览器都支持它作为内联HTML。有关解释，请参阅下面的答案。 – xzyfer 2011-02-01 11:53:23

字是WATERMARK

我鼓励使用插件，除非你有充足的时间devel的的选择和测试。在编写此代码时，需要注意许多问题和副作用。

当字段包含水印文本时，将该字段验证为'空'。从而区分水印文本和输入的文本。
不提交水印文本。
防止用户输入水印文本本身:)
造型水印文本。
等，等....

来源

2011-02-01 11:48:06

我只是想让你知道4个链接中有3个是坏的。 – 2014-01-15 17:09:19

这是solution。

$(".defaultText").focus(function(srcc) 
{ 
    if ($(this).val() == $(this)[0].title) 
    { 
     $(this).removeClass("defaultTextActive"); 
     $(this).val(""); 
    } 
}); 

$(".defaultText").blur(function() 
{ 
    if ($(this).val() == "") 
    { 
     $(this).addClass("defaultTextActive"); 
     $(this).val($(this)[0].title); 
    } 
}); 

$(".defaultText").blur();

来源

2011-02-01 11:47:39 gor

按照建议使用[jquery.watermark]（http://plugins.jquery.com/project/Watermark）插件。 – gor 2011-02-01 11:52:29

对未来的证明和使用数据属性不是更好吗？这种方式代码是未来兼容的，将被验证为HTML5，并且具有语义意义。 – xzyfer 2011-02-01 12:09:02

你可以试试这个：使用title属性存储默认文本

$(function(){ 

$(".makedefault").bind("blur",function(){ 

if($(this).val().length == 0) 
{ 
    $(this).val($(this).attr('title')); 
} 
}); 
$(".makedefault").bind("focus",function(){ 

if($(this).val() == $(this).attr('title')) 
{ 
    $(this).val(""); 
} 
});

}）;

来源

2011-02-01 11:49:01

该功能被称为水印，并能以多种方式来达到的，其中之一是

onfocus="if(this.value=='Enter Email')this.value=''" 
onblur="if(this.value=='')this.value='Enter Email'"

这将电子邮件文本框工作。

来源

2011-02-01 11:50:50

您可以使用新的HTML5占位符属性。

编辑：更新使用更多的HTML5/jQuery hotness，HTML5数据存储。

<input type="text" placeholder="type here" data-placeholder-text="type here" />

这将适用于所有现代浏览器。并在IE中优雅地降级。但对于IE，你必须使用JavaScript。

$(document).ready(function() { 

    var $input = $('#id_of_input_element'); 
    $input.focus(function() { 
     if($(this).val() == $(this).data('placeholder-text')) { 
      $(this).val('') 
     } 
    }).blur(function() { 
     if($(this).val() == '') { 
      $(this).val($(this).data('placeholder-text')); 
     } 
    }).trigger('blur'); 
}):

来源

2011-02-01 11:52:15 xzyfer

你可以使用这个插件（我的合着者）

https://github.com/tanin47/jquery.default_text

其复制的输入字段，并把它放在那里。

它适用于IE，Firefox，Chrome甚至iPhone Safari，它有着名的焦点问题。

这样您就不必担心在提交前清除输入字段。

如果你想HTML5而已，你可以用属性 “占位符” 上输入字段

来源

2011-07-13 05:50:17 Tanin

这里是我的做法（使用jQuery）：

<input id="myBox" type="text" /> 

<script> 
    // Input field and default text 
    var $element = $('#myBox'); 
    var defaultText = 'Hello World'; 

    $element.focus(function(){ 
    // Focused 
    $element.removeClass('defocused').addClass('focused'); 
    if($element.val() == defaultText) 
     $element.val(''); 
    }).blur(function(){ 
    // Defocused 
    $element.removeClass('focused').addClass('defocused'); 
    if($element.val() == '') 
     $element.val(defaultText); 
    }); 

    // Initialization 
    $element.blur(); 
</script>

来源

2012-12-11 11:01:48

输入字段中的默认文本

回答

相关问题