输入字段中的默认文本

Question

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

Answer 1

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

编辑：更新以使用更多HTML5 / jQuery热点，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');
}):

Answer 2

这个词是 WATERMARK

1. http://plugins.jquery.com/project/Watermark
2. http://digitalbush.com/projects/watermark-input-plugin/
3. http://cysemic.com/2008/12/very-simple-textbox-watermark-using-jquery/

我鼓励使用插件，除非你有足够的时间进行开发和测试。编写此代码时需要注意许多问题和副作用。

• 当字段包含水印文本时，将字段验证为“空”。 从而将水印文本与输入文本区分开来。
• 不提交水印文字。
• 阻止用户输入水印文本：）
• 为水印文字设置样式。
• 等等....

Answer 3

该功能称为水印，可以通过多种方式实现，其中之一就是

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

这适用于电子邮件文本框。

Answer 4

这是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();

Answer 5

您可以尝试这样做：使用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("");
}
});

}）;

Answer 6

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

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

克隆输入字段并将其放在那里。

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

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

OR

如果您只想要HTML5，可以在输入字段

上使用属性“占位符”

Answer 7

这是我的方法（使用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>