如何将重影文本添加到 Drupal 网络表单文本区域？答案

【问题标题】：How to add ghosted text to Drupal webform text area?如何将重影文本添加到 Drupal 网络表单文本区域？
【发布时间】：2013-02-06 02:52:20
【问题描述】：

我想知道，有谁知道如何在 Drupal 网络表单文本区域添加幻影（浅灰色）文本以进行描述？一旦用户在文本区域输入内容，重影文本就会消失。

【问题讨论】：

您自己编程这个领域吗？您是否只是想在 drupal 中创建一个表单并在字段模块中有选项？如果您自己编程，此模块可以为您提供帮助：drupal.org/project/placeholder

标签： php drupal textarea drupal-webform

【解决方案1】：

非常简单，无需安装任何模块，使用javascript作为占位符

将此代码粘贴到 page.tpl 的 head 部分

<script language="javascript" type="text/javascript"> 

function placeholder()
{
var input = document.getElementById ("edit-message");
input.placeholder = "Add Your Text Here";   

}
</script>

将“edit-message”替换为您的文本区域 id（使用 fire bug）

在正文标签中添加这个 onload="javascript:placeholder();"

<body onload="javascript:placeholder();"  class="<?php print $body_classes; ?>">

最简单的占位符使用方法，希望对你有帮助！

【讨论】：

recommended 避免在 HTML 中使用事件处理程序，而是将事件附加到元素。此外，当您只需要添加到 textarea 标记的简单属性时，为什么还要使用 JS 来处理所有这些代码呢？如果你最终还是使用 JS，那么占位符属性的意义何在？

【解决方案2】：

您正在寻找的行为由 HTML5 'placeholder' 属性解决，该属性针对现代浏览器中的输入字段实现：Firefox 4+、Opera 11+、Safari 4+、Chrome 4+ ...并且仅在 IE10+ 中:(

所以恕我直言，您有两种方法可以在输入字段中实现“占位符功能”：

1) 快速而肮脏的方式：使用 Javascript 事件处理程序。这样，如果启用了 JS，就可以同时支持新旧浏览器。

2) 正确且有前途的解决方案：使用 HTML5 的“占位符”属性。

您可能已经猜到，第二种方法更难实现，因为 Drupal 7 表单本身不支持占位符属性。要让 Drupal 使用 placeholder="hint..." 属性呈现字段：

a) 如果您使用 Webform Module v.7.x-3.x 或 7.x-4.x 来构建您的表单，只需将在此线程中发布的补丁应用到它：http://drupal.org/node/1305826，和/或...

b) 在主题的 template.php 文件中预处理表单标记，如：http://nathanbuskirk.com/drupal7-placeholder-text-and-html5-forms

在这两种情况下，对 IE6-9 和其他旧浏览器的支持将需要您额外使用一些 pollyfill JS 库，例如 Placeholder.js (https://github.com/jamesallardice/Placeholders.js) 或 JQuery 的 Simple-Placeholder.js (https://github.com/marcgg/Simple-Placeholder)

希望对你有帮助。

【讨论】：