Создание текста-заполнителя для поисковой строки WordPress

Question

Создание текста-заполнителя для поисковой строки WordPress

7 июн. 2013 г., 14:55:08

Просмотры: 16K

Голосов: 1

Мне нужно создать поисковую строку в файле searchform.php, которая будет вести себя аналогично стандартному поведению HTML5 с атрибутом "placeholder".

Вот что у меня сейчас есть в searchform.php:

<input type="submit" id="searchsubmit" value="text" />
<input placeholder="<?php _e( 'Искать здесь...' ); ?>">

Текст 'Искать здесь...' появляется в поле ввода и исчезает, когда я начинаю печатать. Но мне нужно, чтобы он исчезал при клике на поле ввода.

Спасибо.

Flavius Frantz

129

php

Все ответы на вопрос

Комментарии

В наши дни с современными браузерами это можно сделать на чистом CSS без JS: input:focus::placeholder { visibility: hidden; } см. пример

kubi

14 июн. 2019 г. 11:19:15

Попробуйте это, добавьте в файл функций вашей темы:

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="Поиск по сайту" />
     <input type="submit" id="searchsubmit" value="'. esc_attr__('Найти', 'domain') .'" />
     </form></section>';
     return $form;
}

 add_filter( 'get_search_form', 'html5_search_form' );

Обязательно замените domain на ваш языковой домен.

Faolan

21

7 июн. 2013 г. 20:19:22

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

Плейсхолдер сам по себе не исчезнет при клике на текстовое поле. Полагаю, вам понадобится немного JavaScript, чтобы добиться этого.

<input type="text" onfocus="if(this.value=='<?php _e( 'Поиск здесь..' ); ?>'){this.value='';}" onblur="if(this.value==''){this.value='<?php _e( 'Поиск здесь..' ); ?>';}" value="<?php _e( 'Поиск здесь..' ); ?>">

RRikesh

5.66K

7 июн. 2013 г. 15:17:02