Html 文本区域占位符

Posted 2023-05-07

【中文标题】Html 文本区域占位符

【英文标题】：Html Textarea Placeholder

【发布时间】：2011-05-09 07:23:28

【问题描述】：

我有一个 textarea，当焦点对准时应该清空文本持有者，当焦点失焦时应该取回原始文本或保留焦点时写入的任何文本。

编辑：

我知道如何选择文本区域。 $("textarea").text();

当你点击 textarea 时，我不确定如何清除内容，然后在失焦时再次取回内容。

【问题讨论】：

所以你有两个元素——'textarea'和'textholder'。 'textarea' 应该在获得焦点时获取并存储'textholder' 的内容，并在失去焦点时将相同的文本返回给'textholder'？

那么您的实际问题是什么？你的问题出在哪里？

@guys 对不起，我的母语不是英语。

【参考方案1】：

只需添加占位符参数：

<input type="text" name="name" placeholder="input placeholder" />
<textarea name="comment" placeholder="textarea placeholder"></textarea>

【讨论】：

占位符是 html5 属性，在 IE7 或 IE8 中不起作用。请注意，除非您有标签或使用基于 javascript 的解决方案，否则您的表单将在前面提到的浏览器中被破坏。

@siliconrockstar - 它在 IE9 中也不起作用。但是，有许多可用的placeholder attribute polyfills 将增加对旧浏览器的支持。这个解决方案在语义上更好。

@JA - 感谢您提供基于 javascript 的解决方案的链接。

【参考方案2】：

您似乎正在尝试在 textarea 中获取说明，然后如果您删除该值，您将再次获得说明。试试这个

<textarea id="a">Message</textarea>

var standard_message = $('#a').val();
$('#a').focus(
    function() 
        if ($(this).val() == standard_message)
            $(this).val("");
    
);
$('#a').blur(
    function() 
        if ($(this).val() == "")
            $(this).val(standard_message);
    
);

你可以看到它在工作here。

【讨论】：

非常感谢。正是我想要的。我试图了解使用 .focus 和 .blur 的功能，谢谢 cambraca

对于原生 placeholder 属性的更完整的 polyfill/shim，查看这个伟大的项目：jamesallardice.github.io/Placeholders.js。