Creează text placeholder pentru caseta de căutare WordPress

Question

Creează text placeholder pentru caseta de căutare WordPress

7 iun. 2013, 14:55:08

Vizualizări: 16K

Voturi: 1

Am nevoie să creez o casetă de căutare în fișierul meu searchform.php implicit care să aibă un comportament similar cu funcționalitatea implicită din HTML5 folosind atributul "placeholder".

Iată ce am momentan în searchform.php:

 <input type="submit" id="searchsubmit" value="text" />
 <input placeholder="<?php _e( 'Caută aici..' ); ?>">

Textul 'Caută aici..' apare în câmpul de input și dispare când încep să tastez în el. Am nevoie ca acesta să dispară când fac click pe câmp.

Mulțumesc

Flavius Frantz

129

php

Toate răspunsurile la întrebare

Comentarii

În zilele noastre & cu browserele moderne, acest lucru poate fi realizat în CSS pur, fără JS: input:focus::placeholder { visibility: hidden; } vezi pen

kubi

14 iun. 2019 11:19:15

Încearcă asta, adaugă în fișierul de funcții al temei tale:

function html5_search_form( $form ) { 
     $form = '<section class="search"><form role="search" method="get" id="search-form" action="' . home_url( '/' ) . '" >
    <label class="screen-reader-text" for="s">' . __('',  'domain') . '</label>
     <input type="search" value="' . get_search_query() . '" name="s" id="s" placeholder="Caută pe site" />
     <input type="submit" id="searchsubmit" value="'. esc_attr__('Mergi', 'domain') .'" />
     </form></section>';
     return $form;
}

 add_filter( 'get_search_form', 'html5_search_form' );

Asigură-te că înlocuiești "domain" cu domeniul tău de limbă.

Faolan

21

7 iun. 2013 20:19:22

RRikesh 5.66K · Accepted Answer · 2013-06-07T15:17:02Z

Placeholder-ul în sine nu va dispărea atunci când dai clic pe câmpul de text. Probabil ai nevoie de un pic de Javascript pentru a realiza acest lucru.

<input type="text" onfocus="if(this.value=='<?php _e( 'Caută aici..' ); ?>'){this.value='';}" onblur="if(this.value==''){this.value='<?php _e( 'Caută aici..' ); ?>';}" value="<?php _e( 'Caută aici..' ); ?>">

RRikesh

5.66K

7 iun. 2013 15:17:02