フォームのプレースホルダーをテキスト入力フィールドに追加する


22

通常のフォームを変換して、プレースホルダーをモジュールに追加する方法はありますか、それともフォームテンプレートまたはjQueryで行う必要がありますか?

回答:


31

これはHTML5プレースホルダーです。任意の要素に属性として追加するだけで、HTML5対応ブラウザーはそれに応じて反応します。

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'some_form') {
    $form['some_element']['#attributes']['placeholder'] = t('Placeholder text');
  }
}

フォーム内のすべてのテキストフィールドにプレースホルダーを自動的に追加したい場合、このような短い再帰関数は便利です(この例ではフィールドのタイトルに基づいています):

function MYMODULE_auto_placeholders(&$element) {
  if ( isset($element['#type']) && $element['#type'] == 'textfield') {
    // set placeholder
    $element['#attributes']['placeholder'] = $element['#title'];
    // hide label
    $element['#title_display'] = 'invisible';
  }
  foreach (element_children($element) as $key) {
    MYMODULE_auto_placeholders($element[$key]);
  }
}

次に、フォームのalter関数を呼び出すだけで

MYMODULE_auto_placeholders($form);

このメソッドは、フォーム上のほとんどすべてのテキスト#processフィールドで機能しますが、関数に追加されるものを除きます(たとえば、画像フィールドのaltおよびtitleテキストフィールドなど)。


結果:エラー:bla_auto_placeholders()の未定義関数element_children()の呼び出し(themes / custom / BLA / bla.themeの605行目)。
トーマス

15

私はCliveの答えを試しました:

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'some_form') {
    $form['some_element']['#attributes']['placeholder'] = t('Placeholder text');
  }
}

しかし、驚いたことに、テキストフィールド自体ではなく、テキストフィールドのラッパーにプレースホルダーがありました。次に、次のようにバリエーションを試しましたが、うまくいきました!

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'some_form') {
    $form['some_element']['und'][0]['value']['#attributes']['placeholder'] = t('Placeholder text');
  }
}

ありがとう!私は少しおかしくなり始めていました-これについても考えませんでした。
マイククリッテンデン

「some_element」とは何ですか?要素のIDですか?これを見つけるにはどうすればよいですか?
ソクラティス

@sokratisでは、dpm($ form)によって要素のIDを取得できます。これらは、$ form配列の最初のレベルに表示されます。以下は、コメント形式を変更する実際の例です。<code> function MYMODULE_form_alter(&$ form、&$ form_state、$ form_id){if($ form_id == 'comment_node_post_form'){$ form ['subject'] ['# attributes '] [' placeholder '] = t(' Subject '); $ form ['comment_body'] ['und'] [0] ['value'] ['#attributes'] ['placeholder'] = t( 'Content'); }} </ code>
ヘンリー

15

次のコードのように、フォームフィールド要素の#attributes配列にプレースホルダーを追加するだけです。

   $form['my_textfield'] = array(
      '#type' => 'textfield',
      '#attributes' => array(
        'placeholder' => t('My placeholder text'),
      ),
    );

2
THXは、これはDrupalの8で私のために働いた
ノーSssweat

D8でうまく機能しました。
dresh

5

これにつまずいて、Cliveの答えはプレースホルダーを自動的に追加するのがいいと思った。

hou、drupal 8でそれを正しくするためにいくつかの小さな変更が必要なので、これはほぼ同じ答えですが、drupal 8のテーマに適しています。

/**
 * Implements hook_form_alter
 */
function THEME_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  add_placeholders($form);
}


/**
 * Add placeholders to suitable form elements -> textfield, password, email, textarea
 */
function add_placeholders(&$element) {
  if(isset($element['#type']) && in_array($element['#type'], ['textfield', 'password', 'email', 'textarea'])) {
    $element['#attributes']['placeholder'] = $element['#title'];
  }
  foreach(\Drupal\Core\Render\Element::children($element) as $key) {
    add_placeholders($element[$key]);
  }
}

0

フォームインスタンスを直接ターゲットにする場合は、hook_form_FORM_ID_alterを使用します。条件文を使用するよりも整然とかもしれません。のみ検索フォームブロックインスタンスを標的とするための私のソリューション。

function eyecare_form_search_block_form_alter(&$form, $form_state) {
  $form['keys']['#attributes']['placeholder'] = t('Search');
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.