Hello. Thank you for contacting the Toolset support.
Do you mean that when you add/edit the post from the backend you want to restrict your multiline field to maximum number of characgters you define? If this is correct:
- There is no such native feature available. You will have to add custom JS codes that runs on backend.
Can you please tell me what field you want to restrict with what number of characters?
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.
I have set the next reply to private which means only you and I have access to it.
The thing is that you are targeting the custom field that is added to the repeating field group and when you try to add a new entry for the repeating field group it will be added via AJAX and it will require notable custom Javascript/jQuery code to limit the field you are saying and that is beyond the scope of our support policy.
As it requires the custom code and for that you will have to either adjust the code or you are welcome to contact our certified partners and they will help you:
=> https://toolset.com/contractors/
I've added the function and the jQuery is presenting in the source code, but id doesn't seem to be working.
Below is the code I'm using and attached is a screenshot showing that the script is presenting in the source code of the edit entry page.
<?php
add_action( 'admin_print_footer_scripts', 'limit_characters_puppy_description', 100 );
function limit_characters_puppy_description() {
global $parent_file;
if( 'edit.php?post_type=litters' == $parent_file ) {
?>
<script type="text/javascript">
var editor_char_limit = 50;
// jQuery ready fires too early, use window.onload instead
window.onload = function () {
jQuery('[name="wpcf[litter-puppy-description]"]').after('<span class="word-count-message">Reduce word count!</span>');
jQuery('[name="wpcf[litter-puppy-description]"]').keypress(function(e) {
var tval = jQuery('[name="wpcf[litter-puppy-description]"]').val(),
tlength = tval.length,
set = 100,
remain = parseInt(set - tlength);
jQuery(".word-count-message").text(remain);
//$('p').text(remain);
if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
jQuery('[name="wpcf[litter-puppy-description]"]').val((tval).substring(0, tlength - 1))
}
})
}
</script>
<style type="text/css">
.word-count-message { font-size:1.1em; display:block; float:right; color:black; font-weight:bold; margin-top:2px; }
</style>
<?php
}
}
I thought this might be because the text area I'm targeting is in "Repeatable Group" field so I tested stripping down the function to just adding "HELLO there" after any textarea field. Though it presented in the source code there was no "HELLO there" rendered on the edit entry page. Below is the code bit I tested.
I attached a second screenshot showing the field group on the edit entry page.
Well - as this is a repeating field group and there will me multiple instance available so the best and simplest solution would be to add maxlength for the text area.
I've adjusted the code as given under and I can see its adding maxlength with 200 so user can not add more than 200 characters. You just simply add a notice to your custom filed that only 200 characters allowed. That I already set from the custom field group "Only 200 characters allowed.":
=> hidden link
add_action( 'admin_print_footer_scripts', 'limit_characters_puppy_description', 100 );
function limit_characters_puppy_description() {
global $parent_file;
if( 'edit.php?post_type=litters' == $parent_file ) {
?>
<script type="text/javascript">
var editor_char_limit = 200;
// jQuery ready fires too early, use window.onload instead
window.onload = function () {
jQuery('[name*="[litter-puppy-description]"]').prop("maxLength",200);
}
</script>
<?php
}
}
Please make sure that you hard clear your browser cache and then you should check. I can see its working as expected and maxlength attribute is added to textarea.
I've cleared my browser cache. I can see the code you updated in the source code. I do not see any character limitation other than the custom field description text. I don't see any evidence that the code snippet is impacting the textfield. I'm not sure if I'm missing something or if we have different expectations.
I've attached a screenshot so you can see what I'm seeing.
Its working for me. As this is a custom code and I also guided you how you can achieve this. This is already beyond the scope of our support policy. You are welcome to contact the pro Javascript expert to get help for such custom edits.
I took your advice and found someone on upwork to assist me. I'm sharing the solutuion so that others can benefit from it.
I think the main challenge is becuase the toolset repeatable fields within the field group are added dynamically, making it hard to target onload. To help a jQuery document on focus was added. Brandon Adderley @ upwork is the author of the code bit below
add_action( 'admin_print_footer_scripts', 'limit_characters_puppy_description', 100 );
function limit_characters_puppy_description() {
// Run code on edit posts of custom post type "litters"
global $parent_file;
if( 'edit.php?post_type=litters' == $parent_file ) {
?>
<script type="text/javascript">
var editor_char_limit = 200;
// jQuery ready fires too early, use window.onload instead
window.onload = function () {
jQuery(document).on('focus', '[name*=litter-puppy-description]', function() {
var textlen = editor_char_limit - jQuery(this).val().length;
var id = jQuery(this).attr('id');
var descid = id + "-maxlength";
var maxlengthpara = jQuery(this).next('p');
jQuery(this).prop("maxLength",editor_char_limit);
if (!maxlengthpara.length) {
var newparagraph = "<p id='" + descid + "' class='my-class'> <span>" + textlen + " </span> Character(s) Remaining </p>";
jQuery(this).after(newparagraph);
}
});
jQuery(document).on('keyup', '[name*=litter-puppy-description]', function() {
var textlen = editor_char_limit - jQuery(this).val().length;
var id = jQuery(this).attr('id');
var descid = id + "-maxlength";
var maxlengthpara = jQuery(this).next('p');
if (maxlengthpara.length) {
maxlengthpara.find('span').html(textlen);
}
});
}
</script>
<?php
}
}
