It appears that you have two errors in your code as posted in the comments (and pasted below).
- You’ve concatenated the script tag in the comment_field array value without encapsulating it as a string (in quotes). Ideally, your declaration of the limiter function should be in tags outside of the markup being passed in the
comments_argsarray being passed tocomment_formfunction. Alternatively, you could load the jquery counter library in your the tag by adding it to your theme’s functions.php (using wp_enqueue_script) - Also, you’ve initialized the “limiter” function on the wrong element ID of “text” instead of “comment” as set in the ‘comment-field’ array key. I recommend calling it after the document is fully loaded/is ready.
For easier reference, I’ve copied and pasted the code you shared in the comments (reformatted for better readability) as well as posted the edits likely required:
Your implementation as shared (https://ideone.com/yFIXG3):
<div id="commentform" class="c-box">
<?php global $aria_req; $comments_args = array(
'title_reply'=>'<h4><span>'.__('Add Comment', 'MyTheme' ).'</span></h4>',
'comment_notes_before' => '',
'comment_notes_after' => '',
'label_submit' => __( 'Post Comment', 'MyTheme' ),
'comment_field' => '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" maxlength="600" placeholder="'.__('Comment Description *', 'MyTheme' ).'"></textarea>'.<script>
(function ($) {
$.fn.extend({
limiter: function (minLimit, maxLimit, elem) {
$(this).on("keydown keyup focus keypress", function (e) {
setCount(this, elem, e);
});
function setCount(src, elem, e) {
var chars = src.value.length;
if (chars == maxLimit) {
//e.preventDefault();
elem.html(maxLimit - chars);
elem.addClass("maxLimit");
return false;
} else if (chars > maxLimit) {
src.value = src.value.substr(0, maxLimit);
chars = maxLimit;
elem.addClass("maxLimit");
} else {
elem.removeClass("maxLimit");
}
if (chars < minLimit) {
elem.addClass("minLimit");
} else {
elem.removeClass("minLimit");
}
elem.html(maxLimit - chars);
}
setCount($(this)[0], elem);
}
});
})(jQuery);
var elem = $("#chars");
$("#text").limiter(35, 200, elem);
</script>.'</p>',
'fields' => apply_filters( 'comment_form_default_fields',
array(
'author' => '<p class="comment-form-author">'
.( $req ? '' : '' ).'<input id="author" name="author" type="text" aria-required="true" maxlength="20" placeholder="'.__('Name *', 'MyTheme' ).'" value="'.esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
'email' => '<p class="comment-form-email">'
.($req ? '' : '' ) . '<input id="email" name="email" type="text" aria-required="true" maxlength="50" placeholder="'.__('Email *', 'MyTheme' ).'" value="' . esc_attr( $commenter['comment_author_email'] ).'" size="30"'.$aria_req.' /></p>',
'url' => '<p class="comment-form-url"><input id="url" name="url" type="text" placeholder="'.__('Website', 'MyTheme' ).'" value="' . esc_url( $commenter['comment_author_url'] ) . '" size="30" /></p>'
)
)
);
comment_form($comments_args); ?>
</div>
Your implementation as shared, but formatted:
<div class="c-box" id="commentform">
<?php
global $aria_req;
$comments_args = array(
'title_reply' =>
'<h4><span>'.__('Add Comment', 'MyTheme' ).'</span></h4>',
'comment_notes_before' =>
'',
'comment_notes_after' =>
'',
'label_submit' =>
__( 'Post Comment', 'MyTheme' ),
'comment_field' =>
'<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" maxlength="600" placeholder="'.__('Comment Description *', 'MyTheme' ).'"></textarea>'.
<script>
(function($) {
$.fn.extend({
limiter: function(minLimit, maxLimit, elem) {
$(this).on("keydown keyup focus keypress", function(e) {
setCount(this, elem, e);
});
function setCount(src, elem, e) {
var chars = src.value.length;
if (chars == maxLimit) {
//e.preventDefault();
elem.html(maxLimit - chars);
elem.addClass("maxLimit");
return false;
} else if (chars > maxLimit) {
src.value = src.value.substr(0, maxLimit);
chars = maxLimit;
elem.addClass("maxLimit");
} else {
elem.removeClass("maxLimit");
}
if (chars < minLimit) {
elem.addClass("minLimit");
} else {
elem.removeClass("minLimit");
}
elem.html(maxLimit - chars);
}
setCount($(this)[0], elem);
}
});
})(jQuery);
var elem = $("#chars");
$("#text").limiter(35, 200, elem);
</script>
.'</p>',
'fields' =>
apply_filters( 'comment_form_default_fields',
array(
'author' =>
'<p class="comment-form-author">'.( $req ? '' : '' ).'<input id="author" name="author" type="text" aria-required="true" maxlength="20" placeholder="'.__('Name *', 'MyTheme' ).'" value="'.esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
'email' =>
'<p class="comment-form-email">'.($req ? '' : '' ) . '<input id="email" name="email" type="text" aria-required="true" maxlength="50" placeholder="'.__('Email *', 'MyTheme' ).'" value="' . esc_attr( $commenter['comment_author_email'] ).'" size="30"'.$aria_req.' /></p>',
'url' =>
'<p class="comment-form-url"><input id="url" name="url" type="text" placeholder="'.__('Website', 'MyTheme' ).'" value="' . esc_url( $commenter['comment_author_url'] ) . '" size="30" /></p>'
)
)
);
comment_form($comments_args);
?>
</div>
Recommended adjustments:
<div class="c-box" id="commentform">
<?php
global $aria_req;
$comments_args = array(
'title_reply' =>
'<h4><span>'.__('Add Comment', 'MyTheme' ).'</span></h4>',
'comment_notes_before' =>
'',
'comment_notes_after' =>
'',
'label_submit' =>
__( 'Post Comment', 'MyTheme' ),
'comment_field' =>
'<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" maxlength="600" placeholder="'.__('Comment Description *', 'MyTheme' ).'"></textarea></p>',
'fields' =>
apply_filters( 'comment_form_default_fields',
array(
'author' =>
'<p class="comment-form-author">'.( $req ? '' : '' ).'<input id="author" name="author" type="text" aria-required="true" maxlength="20" placeholder="'.__('Name *', 'MyTheme' ).'" value="'.esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
'email' =>
'<p class="comment-form-email">'.($req ? '' : '' ) . '<input id="email" name="email" type="text" aria-required="true" maxlength="50" placeholder="'.__('Email *', 'MyTheme' ).'" value="' . esc_attr( $commenter['comment_author_email'] ).'" size="30"'.$aria_req.' /></p>',
'url' =>
'<p class="comment-form-url"><input id="url" name="url" type="text" placeholder="'.__('Website', 'MyTheme' ).'" value="' . esc_url( $commenter['comment_author_url'] ) . '" size="30" /></p>'
)
)
);
comment_form($comments_args);
?>
<script>
(function($) {
$.fn.extend({
limiter: function(minLimit, maxLimit, elem) {
$(this).on("keydown keyup focus keypress", function(e) {
setCount(this, elem, e);
});
function setCount(src, elem, e) {
var chars = src.value.length;
if (chars == maxLimit) {
//e.preventDefault();
elem.html(maxLimit - chars);
elem.addClass("maxLimit");
return false;
} else if (chars > maxLimit) {
src.value = src.value.substr(0, maxLimit);
chars = maxLimit;
elem.addClass("maxLimit");
} else {
elem.removeClass("maxLimit");
}
if (chars < minLimit) {
elem.addClass("minLimit");
} else {
elem.removeClass("minLimit");
}
elem.html(maxLimit - chars);
}
setCount($(this)[0], elem);
}
});
$(document).ready(function() {
var elem = $("#chars");
$("#comment").limiter(35, 200, elem);
});
})(jQuery);
</script>
</div><!--/#commentform-->