web-dev-qa-db-fra.com

Ajout d'espaces réservés de formulaire aux champs de saisie de texte

Existe-t-il un moyen de convertir un formulaire standard et d'ajouter des espaces réservés avec un module, ou cela devrait-il être fait avec un modèle de formulaire ou avec jQuery?

themingforms
24
chrisjlee

C'est un espace réservé HTML5, vous pouvez simplement l'ajouter comme attribut à n'importe quel élément et les navigateurs compatibles HTML5 réagiront en conséquence:

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

Une fonction récursive courte comme celle-ci peut être utile si vous souhaitez ajouter automatiquement des espaces réservés pour chaque champ de texte dans un formulaire (basé sur le titre du champ dans cet exemple):

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

Ensuite, dans votre formulaire alter function, appelez simplement

MYMODULE_auto_placeholders($form);

Cette méthode fonctionnera pour à peu près tous les champs de texte d'un formulaire, à l'exception de ceux qui sont ajoutés dans #process fonctions (comme les champs de texte alt et title d'un champ image par exemple).

33
Clive

Ajoutez simplement l'espace réservé dans le tableau #attributes pour l'élément de champ de formulaire, comme dans le code suivant.

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

J'ai essayé la réponse de Clive:

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

Mais à ma grande surprise, j'ai obtenu l'espace réservé dans le wrapper de textfield, pas textfield lui-même. Ensuite, j'ai essayé une variante comme suit, cela a fonctionné!

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

Je suis tombé sur cela et j'ai pensé que la réponse de Clive semblait agréable d'ajouter automatiquement des espaces réservés.

Toi, quelques modifications mineures sont nécessaires pour bien faire les choses dans drupal 8, donc voici à peu près la même réponse, mais adaptée à votre drupal 8 thème.

/**
 * 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]);
  }
}
5
frysch

Si vous souhaitez cibler une instance de formulaire directement, utilisez hook_form_FORM_ID_alter. Pourrait être plus ordonné que l'utilisation de conditionnels. Ma solution pour cibler l'instance de bloc de formulaire de recherche uniquement.

function eyecare_form_search_block_form_alter(&$form, $form_state) {
  $form['keys']['#attributes']['placeholder'] = t('Search');
}
0
Dr.ifle