Menambahkan placeholder formulir ke bidang input teks

22

Apakah ada cara untuk mengonversi formulir biasa dan menambahkan placeholder dengan modul, atau haruskah ini dilakukan dengan Templat formulir atau dengan jQuery?

chrisjlee
sumber

Jawaban:

31

Itu adalah placeholder HTML5, Anda bisa menambahkannya sebagai atribut ke elemen apa pun dan browser yang diaktifkan HTML5 akan bereaksi sesuai itu:

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

Fungsi rekursif singkat seperti ini mungkin berguna jika Anda ingin secara otomatis menambahkan placeholder untuk setiap bidang teks dalam formulir (berdasarkan judul bidang dalam contoh ini):

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

Kemudian dalam bentuk Anda ubah fungsi panggil saja

MYMODULE_auto_placeholders($form);

Metode itu akan bekerja untuk hampir semua bidang teks pada formulir, dengan pengecualian yang ditambahkan dalam #processfungsi (misalnya alt dan judul bidang teks bidang gambar misalnya).

Clive
sumber
Hasil: Kesalahan: Panggil ke function_children function () yang tidak terdefinisi () di bla_auto_placeholder () (baris 605 tema / custom / BLA / bla.theme).
Thomas
15

Saya mencoba jawaban Clive:

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

Tapi yang mengejutkan saya, saya mendapatkan placeholder di bungkus textfield, bukan textfield itu sendiri. Kemudian saya mencoba variasi sebagai berikut, itu berhasil!

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');
  }
}
Henry
sumber
Terima kasih! Saya mulai menjadi sedikit gila - bahkan tidak memikirkan hal ini.
Mike Crittenden
Apa itu "some_element"? Apakah ID elemen? Bagaimana saya bisa menemukan ini?
sokratis
@sokratis Anda bisa mendapatkan ID elemen dengan dpm ($ form), mereka muncul di level pertama dari $ form array. Berikut ini adalah contoh aktual dari mengubah bentuk komentar: <code> fungsi MYMODULE_form_alter (& $ form, & $ form_state, $ form_id) {if ($ form_id == 'comment_node_post_form') {$ form ['subject'] ['#] atribut '] [' placeholder '] = t (' Subjek '); $ form ['comment_body'] ['und'] [0] ['value'] ['# atribut'] ['placeholder'] = t ('Konten'); }} </code>
Henry
15

Tambahkan saja placeholder di larik #attributes untuk elemen bidang formulir, seperti dalam kode berikut.

   $form['my_textfield'] = array(
      '#type' => 'textfield',
      '#attributes' => array(
        'placeholder' => t('My placeholder text'),
      ),
    );
neelmeg
sumber
2
thx, ini bekerja untuk saya di Drupal 8.
No Sssweat
bekerja dengan baik di D8.
dresh
5

Menemukan ini dan berpikir jawaban Clive tampak bagus untuk secara otomatis menambahkan placeholder.

Anda, beberapa perubahan kecil diperlukan untuk melakukannya dengan benar di drupal 8, jadi inilah jawaban yang hampir sama, tetapi cocok untuk tema drupal 8 Anda.

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

Jika Anda ingin menargetkan contoh formulir secara langsung menggunakan hook_form_FORM_ID_alter. Mungkin lebih rapi daripada menggunakan kondisional. Solusi saya untuk menargetkan contoh blok formulir pencarian saja.

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