Question

我想知道，有没有人知道如何将幻影（浅灰色）文本添加到Drupal webform文本区域以提供说明？一旦用户在文本区域输入内容，幻影文本就会消失。

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

替换＆＃34;编辑消息＆＃34;使用您的文本区域ID（使用火虫）

在正文标记中添加 onload =＆＃34; javascript：placeholder（）;＆＃34;

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

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

Answer 2

您正在寻找的行为由HTML5'占位符'属性解决，该属性是针对现代浏览器中的输入字段实现的：Firefox 4 +，Opera 11 +，Safari 4 +，Chrome 4+ ......仅适用于IE10 + ：（

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

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

2）权利＆amp;崭露头角的解决方案：使用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'Emple-Placeholder.js（{{3 }}）

希望它有所帮助。

如何将幻影文本添加到Drupal webform文本区域？

2 个答案: