0

Drupal ウェブフォームのテキスト領域にゴースト (ライト グレー) のテキストを追加して説明を表示する方法を知っている人はいますか? ユーザーがテキスト領域に何かを入力すると、ゴースト テキストが消えるはずです。

4

2 に答える 2

0

あなたが探している動作は、HTML5 'placeholder' 属性によって解決され、最新のブラウザーの入力フィールドに実装されています: Firefox 4+、Opera 11+、Safari 4+、Chrome 4+ ... IE10+ のみ:(

したがって、入力フィールドに「プレースホルダー機能」を実装するには、次の 2 つの方法があります。

1) 手っ取り早い方法: Javascript イベント ハンドラーを使用する。このようにして、JS が有効になっている場合、古いブラウザーと最新のブラウザーを同時にサポートできます。

2) 適切で有望な解決策: HTML5 'placeholder' 属性の使用。

ご想像のとおり、プレースホルダー属性は Drupal 7 フォームでネイティブにサポートされていないため、2 番目のアプローチは実装が困難です。Drupal に placeholder="hint..." 属性を使用してフィールドをレンダリングさせるには:

a) フォームの作成に Webform Module v.7.x-3.x または 7.x-4.x を使用する場合は、このスレッドで公開されているパッチを適用してください: http://drupal.org/node/ 1305826、および/または...

b) http://nathanbuskirk.com/drupal7-placeholder-text-and-html5-formsで説明されているように、テーマの template.php ファイルでフォーム マークアップを前処理します。

どちらの場合も、IE6-9 やその他の古いブラウザーをサポートするには、Placeholder.js ( https://github.com/jamesallardice/Placeholders.js ) や JQuery の Simple-Placeholderなどの pollyfill JS ライブラリを追加で使用する必要があります。 js ( https://github.com/marcgg/Simple-Placeholder )

それが役に立てば幸い。

于 2013-05-14T00:37:07.727 に答える
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 に答える