การเพิ่มตัวยึดแบบฟอร์มไปยังช่องป้อนข้อความ


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

จากนั้นในฟังก์ชั่นการเปลี่ยนแปลงรูปแบบของคุณเพียงแค่โทร

MYMODULE_auto_placeholders($form);

วิธีการนั้นจะใช้ได้กับทุกฟิลด์ข้อความในแบบฟอร์มยกเว้นการเพิ่มใน#processฟังก์ชั่น (เช่น alt และชื่อฟิลด์ข้อความของฟิลด์รูปภาพเป็นต้น)


ผลลัพธ์: ข้อผิดพลาด: การเรียกไปยังฟังก์ชั่นที่ไม่ได้กำหนด element_children () ใน bla_auto_placeholders () (บรรทัด 605 ของธีม / กำหนดเอง / BLA / bla.theme)
โทมัส

15

ฉันลองคำตอบของคลีฟ:

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

แต่ด้วยความประหลาดใจของฉันฉันได้รับตัวยึดตำแหน่งในห่อของ textfield ไม่ใช่ textfield เอง จากนั้นฉันก็ลองชุดรูปแบบดังนี้ใช้งานได้!

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

"some_element" คืออะไร ID ขององค์ประกอบคืออะไรฉันจะค้นหาสิ่งนี้ได้อย่างไร
sokratis

@sokratis คุณสามารถรับ ID ขององค์ประกอบได้โดย dpm ($ form) โดยจะปรากฏในระดับแรกของ $ form array ต่อไปนี้เป็นตัวอย่างที่แท้จริงของการแก้ไขฟอร์มความคิดเห็น: <code> ฟังก์ชัน MYMODULE_form_alter (& $ ฟอร์ม, & $ form_state, $ form_id) {ถ้า ($ form_id == 'comment_node_post_form') {$ form ['subject'] ['#' แอตทริบิวต์ '] [' ตัวยึด '] = t (' หัวเรื่อง '); $ form ['comment_body'] ['und'] [0] ['value'] ['# attributes'] ['placeholder'] = t ('เนื้อหา'); }} </code>
Henry

15

เพียงเพิ่มตัวยึดตำแหน่งในอาร์เรย์ #attributes สำหรับองค์ประกอบเขตข้อมูลฟอร์มเช่นในรหัสต่อไปนี้

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

2
ขอบคุณสิ่งนี้ใช้ได้กับฉันใน Drupal 8
ไม่มี Sssweat

ทำงานได้ดีใน D8
dresh

5

สะดุดกับสิ่งนี้และคิดว่าคำตอบของคลีฟดูเหมือนดีที่จะเพิ่มตัวยึดตำแหน่งโดยอัตโนมัติ

ท่านจำเป็นต้องทำการเปลี่ยนแปลงเล็กน้อยเพื่อให้ถูกต้องใน 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.