Pracując z WordPressem, często korzystam z wtyczki Advanced Custom Fields (ACF). Ostatnio na potrzeby projektu miałem zrobić obszary tekstowe z ograniczeniem ilości wpisywanych znaków. ACF daje taką możliwość – w konfiguracji obszarów tekstowych można ustawić limit znaków. Ładnie to działa, znaki są blokowane, lecz brakowało mi prostego licznika wpisanych znaków. Tak, aby podczas edycji tekstu, użytkownik wiedział, ile jeszcze może napisać, aby zmieścić się w ustalonym limicie. ACF ustalając limit znaków dodaje do pola formularza atrybut maxlength. Można więc wykorzystać ten atrybut do napisania prostego skryptu. Działanie skryptu zliczającego znaki, wyglądać będzie następująco:
W tym celu skorzystam z akcji acf/input/admin_head, która zgodnie z tym co podaje dokumentacja ACF, zbliżona jest do wordpressowej akcji admin_head(). Umożliwi ona dodanie skryptu tylko do tych stron w panelu administracyjnym WordPressa, w których użyte są jakiekolwiek pola ACF. W pliku functions.php motywu (lub w pliku z pluginem) dodaj poniższy kod.
add_action( 'acf/input/admin_head', 'input_characters_counter' );
if ( ! function_exists( 'input_characters_counter' ) ) {
/**
* Show characters counter for ACF textarea with characters limit
*/
function input_characters_counter() {
echo '<script type="text/javascript">';
?>
jQuery(function () {
let input = jQuery('textarea[maxlength]'), len, limit
input.each(function () {
len = jQuery(this).val().trim().length
limit = jQuery(this).attr('maxlength')
$(this).parent().append('Znaki: ' + len + ' z ' + limit + '')
})
jQuery('#post-body').on('keyup paste', 'textarea[maxlength]', function () {
len = jQuery(this).val().trim().length
limit = jQuery(this).attr('maxlength')
if (len > limit) {
jQuery(this).val(jQuery(this).val().substr(0, limit))
return false
}
jQuery(this).siblings('.acf-counter').html('Znaki: ' + len + ' z ' + limit)
})
})
<?php echo '</script>';
}
}
Jeśli chcesz, możesz dodatkowo ostylować tekst licznika. W tym celu wystarczy przypisać odpowiednie style klasie acf-counter.
