Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active March 3, 2018 08:27
Show Gist options
  • Save srikat/8313007 to your computer and use it in GitHub Desktop.
Save srikat/8313007 to your computer and use it in GitHub Desktop.
Making search form input box text go away on focus in Genesis. http://sridharkatakam.com/make-search-form-input-box-text-go-away-focus-genesis/
jQuery(document).ready(function($) {
$('input').focusin(function() {
input = $(this);
input.data('place-holder-text', input.attr('placeholder'))
input.attr('placeholder', '');
});
$('input').focusout(function() {
input = $(this);
input.attr('placeholder', input.data('place-holder-text'));
});
});
add_action( 'wp_enqueue_scripts', 'sk_clear_search_form' );
function sk_clear_search_form() {
wp_enqueue_script( 'clear-search-form', get_stylesheet_directory_uri() . '/js/clear-search-form.js', array( 'jquery' ), '1.0.0', true );
}
add_filter( 'genesis_search_form', 'sk_search_form', 10, 4 );
function sk_search_form( $form, $search_text, $button_text, $label ) {
$search_text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'genesis_search_text', __( 'Search this website', 'your-theme-slug' ) . '…' );
$button_text = apply_filters( 'genesis_search_button_text', esc_attr__( 'Search', 'your-theme-slug' ) );
$onfocus = "if ('" . esc_js( $search_text ) . "' === this.value) {this.value = '';}";
$onblur = "if ('' === this.value) {this.value = '" . esc_js( $search_text ) . "';}";
$label = apply_filters( 'genesis_search_form_label', '' );
$form = sprintf( '<form method="get" class="search-form" action="%s" role="search">%s<input type="search" name="s" value="%s" onfocus="%s" onblur="%s" /><input type="submit" value="%s" /></form>', home_url( '/' ), esc_html( $label ), esc_attr( $search_text ), esc_attr( $onfocus ), esc_attr( $onblur ), esc_attr( $button_text ) );
return $form;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment