文本区域中的标签答案

【问题标题】：labels in textarea文本区域中的标签
【发布时间】：2009-11-17 05:25:20
【问题描述】：

<input name="textbox" type="text" value="Click here to type" onfocus="if(this.value=='Click here to type')this.value='';" onblur="if(this.value=='')this.value='Click here to type';">

..onfocus/onblur 适用于文本字段，但不适用于 textarea 元素。是否有任何解决方法，也许使用 jQuery？

【问题讨论】：

标签： javascript jquery forms textarea

【解决方案1】：

onfocus 和 onblur 事件适用于所有表单元素和锚点，您可以尝试将 input 设置为 textarea，它会起作用，但我鼓励您以编程方式进行事件绑定.

类似这样的：

var textarea = document.getElementById('textareaId'),
    message = 'Click here to type';

textarea.value = message; // set default value

textarea.onfocus = textarea.onblur = function () {

  if (this.value == '') {
    this.value = message;
  } else if (this.value == message) {
    this.value = '';
  }
};

试试上面的例子here。

jQueryversion:

$(function () { 
  var message = 'Click here to type'; 

  $('#textareaId').val(message); // set default value 

  $('#textareaId').bind('focus blur', function () { 
    var $el = $(this); 
    if ($el.val() == '') { 
      $el.val(message); 
    } else if ($el.val() == message) { 
      $el.val(''); 
    } 
  }); 
});

【讨论】：

【解决方案2】：

<textarea onfocus="if(this.value=='Click here to type')this.value='';" onblur="if(this.value=='')this.value='Click here to type';">Click here to type</textarea>

为我工作。

如果您在值中添加一些额外的换行符/空格，当然可能会失败。

【讨论】：

【解决方案3】：

Watermark plugin for jQuery.

这个简单易用的 jQuery 插件增加了水印功能到 HTML 输入和文本区域元素。

这个插件可以让你指定文本将用于水印，并且您可以选择提供自己的将应用于的 CSS 类名每个输入或文本区域元素显示水印的时间。

如果您不提供自己的课程 name，类名“watermark”是用过。

此外，此插件允许您更改水印文本和/或类在水印之后的任何时间命名初始化。

该插件还能够在密码中显示水印输入元素，显示水印纯文本，但随后切换到密码保护（隐藏）模式专注时。（由于密码复杂度水印操作，推荐以编程方式更改密码避免输入元素。）

3.0版本新增，插件可以也处理输入元素 type="search"（WebKit 浏览器），以及它支持拖放到水印元素，插件原生浏览器支持（如果可用）。

【讨论】：