Javascript 输入字段中的默认文本

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

这里是

这个词是

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

• 验证包含水印文本的字段是否为“空”。 从而区分水印文本和输入文本
• 不提交水印文本
• 防止用户键入水印文本本身：）
• 设置水印文本的样式
• 等等，等等

---

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

---

}))

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

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

---

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

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

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

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

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

它克隆一个输入字段并将其放在那里

它可以在IE、Firefox、Chrome甚至iPhone Safari上运行，而iPhone Safari存在着著名的焦点问题

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

或

---

如果只想使用HTML5，只需在输入字段中使用属性“占位符”

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

//输入字段和默认文本
var$element=$（“#myBox”）；
var defaultText='helloworld'；
$element.focus（函数（）{
//专注
$element.removeClass（'disfocused'）.addClass（'focused'）；
如果（$element.val（）==defaultText）
$element.val（“”）；
}).blur（函数（）{
//散焦
$element.removeClass（'focused'）.addClass（'disfocused'）；
如果（$element.val（）=''）
$element.val（默认文本）；
});
//初始化
$element.blur（）；

按照建议使用插件。将来验证并使用数据属性不是更好吗？通过这种方式，代码将来是兼容的，将作为HTML5进行验证，并且具有语义意义。它现在正式成为HTML（5）规范的一部分，因此所有现代浏览器都支持它作为内联HTML。请看下面我的回答以获得解释。@The_Butcher:谢谢，我很高兴我们都听到了互相帮助的声音，但我们今天真的应该大显身手，而不是生活在这些javascript黑客的世界中。ye，不幸的是，许多公司和企业无法从Win XP迁移，因此从ie6，因为他们的大多数软件都是在ie6上工作的：/我理解这一点。但我的解决方案不仅在所有浏览器中都会优雅地退化，而且不需要插件，而且它与未来100%兼容。未来的代码就是我所要问的：）一个虚拟的-1对于没有实际投票HTML5答案的屠夫来说。（据我所知）在我阅读时，它没有投票权，但我将给它一个。很好的解决方案，甚至不知道新属性！是否有任何理由不使用$（this.attr（'placeholder'）并避免重复？IIRC，即使是糟糕的浏览器也可以访问意外的属性。我只是想让你知道4个链接中有3个被破坏了。

$(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');
}):

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