0

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

4

2 回答 2

0

非常简单，无需安装任何模块，使用 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; ?>">

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

于 2013-02-21T05:59:23.377 回答
0

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

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

1）快速而肮脏的方式：使用Javascript事件处理程序。通过这种方式，如果启用了 JS，您可以同时支持旧浏览器和现代浏览器。

2) 正确且有前途的解决方案：使用 HTML5 'placeholder' 属性。

正如您可能猜到的那样，第二种方法更难实现，因为 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 )

希望能帮助到你。

于 2013-05-14T00:37:07.727 回答