将表单占位符添加到文本输入字段


22

有没有一种方法可以转换常规表单并使用模块添加占位符,还是应该使用表单模板或jQuery完成?

Answers:


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()(主题/custom/BLA/bla.theme的第605行)。
托马斯(Thomas)

15

我尝试了克莱夫的答案:

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');
  }
}

谢谢!我开始有点发疯了-甚至都没有想到这一点。
Mike Crittenden 2015年

什么是“ some_element”?元素的ID?如何找到?
sokratis

@sokratis,您可以通过dpm($ form)获取元素的ID,它们出现在$ form数组的第一级中。以下是更改注释形式的实际示例:<code>函数MYMODULE_form_alter(&$ form,&$ form_state,$ form_id){if($ form_id =='comment_node_post_form'){$ form ['subject'] ['#属性'] ['占位符'] = t('主题'); $ form ['comment_body'] ['und'] [0] ['value'] ['#attributes'] ['placeholder'] = t('Content'); }} </ code>
亨利(Henry)

15

只需在表单字段元素的#attributes数组中添加占位符,例如以下代码。

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

2
THX,这个工作对我来说在Drupal 8
无Sssweat

在D8中表现出色。
dresh

5

偶然发现此问题,并认为自动添加占位符的Clive答案似乎不错。

您需要对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');
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.