Jump to content

Char counter for text/textarea fields


bfncs
 Share

Recommended Posts

Aha yes now I see. Ryan explains why and he's correct that a InputfieldTextareaCount would be a good/better way to go.

I think a way around it could be a check at line #41

if ($this->process != 'ProcessField') {
    return;
}

Edit: There's a bug filed on github long time ago.

But as with many modules up here, the problem is, dev's have time to make the module but not maintain it. :D

  • Like 4
Link to comment
Share on other sites

Hi everyone,

thanks, Joss for again pointing to the issue and Some for suggesting a fix.

I want to maintain the module and would be more than happy to add a fix to the repository. The bug described (as well as the one on Github) does only occured when used in conjunction with Formbuilder, which is a paid module. I don't own it because I have no particular use for it, so it's also not possible for me to test suggested fixes.

If someone could please check whether Soma's suggestion works out (which I suppose, because actually he is one of the good guys) and I'll add it in an instant.

P.S.: Ryan's post mentioned above is actually an answer to me seeking advice on the best implementation. At the time asked and answered I didn't see too much benefit in implementing the functionality as an Inputfield of it's own in comparison with the current implementation - both had their advantages and drawbacks.

Seeing that that this now caused confusion to some and the Inputfield implementation could possibly be used with Formbuilder, I see the really benefit in doing the other implementation. I'm seriously considering to add the other implementation as a separate module now.

Link to comment
Share on other sites

That might explain why it is happening in my front end form.

I have tried that edit and it seems to work. I haven't checked thoroughly whether it causes any other issues in the process, though I cant think what problems it would cause.

boundaryfunctions - you should be able to check those yourself okay because it is not a question of having form builder installed.

Thanks guys!

  • Like 1
Link to comment
Share on other sites

Ok, I just pushed an update to the modules repository, also bumping the version number to 1.0.3. Could you please confirm that this fixes the problem for you?

@Soma:

I just tried to force the error in a frontend form but that worked fine instead. The problem in this case was in the function hooked after InputfieldTextarea::getConfigInputfields() which was only called in the backend. Thanks anyway for your - as always - very helpful suggestion!

@Martijn:

Thanks for the suggestion. I'm not sure whether this would be too restrictive because there might be handy uses of this module in the frontend - which would then be forbidden. I currently much favour to convert it into an Inputfield on it's own.

Thanks a lot to all of you for your help.

  • Like 1
Link to comment
Share on other sites

There is an up and downside as an input field.

The up is that conflicts should be non-existent.

The down is that you cannot add it to an existing field.

Maybe there is a way to do it where it targets very specific fields rather than just hitting all textareas.

That way it might also play with text fields as well? (is that possible?) for instance when you want to limit a title length.

Link to comment
Share on other sites

  • 7 months later...
  • 1 month later...
  • 8 months later...

Great tip, Martijn Geerts!

Do anyone here now how to setup fields in ProcessPageEditTruncate.js? 

Readme says 4. Configure your fields in ProcessPageEditTruncate.js and save the file.

But I cannot see how to do it in the JS-file.

Link to comment
Share on other sites

@laban, sorry didn't spot your question earlier.

But here's the answer.

// DOM is ready
$(function () {
    // field with the name attribute title
    $("[name='title']").truncate({
        characters: 55,
        prefix: '',
        suffix: ' character(s)'
    });

    // field with the name attribute an-other-field
    $("[name='an-other-field']").truncate({
        characters: 160,
        prefix: '',
        suffix: ' character(s)'
    });

});

  • Like 3
Link to comment
Share on other sites

I have now installed the plugin, moved ProcessPageEditTruncate.js to AdminCustomFiles's root folder in "modules" and tested the custom settings you have provided (thank you!) multiple places, but I cannot seem to get it right. I'll paste my code below.

ProcessPageEdit is also activated in the module settings in ProcessWire (but no other options have been setup there).

Some guidance on what I am doing wrong would be much appreciated. (I am running ProcessWire 2.7.2). 

(function ($) {
	$.fn.truncate = function(options) {

		var $fields = this,
			name = $fields.attr('name'),
			settings = $.extend({
				characters: 128,
				prefix: '',
				suffix: '',
				class: 'notes'
			}, options );

		if ($fields.parent('.LanguageSupport').length) {
			var $fields = $("#langTabs_Inputfield_" + name ).find("input, textarea");
		}

		$fields.after("<span class='" + settings.class + "'></span>");

		$fields.each(function (index, el) {
			var truncate = function () {
				var value = $(el).val(),
					typed = typeof value != 'undefined' ? value.length : 0,
					left = settings.characters - typed;
				if (left < 0) {
					$(el).val(value.substr(0, settings.characters));
					truncate();
				} else {
					$(el).next("span").text(settings.prefix + left + settings.suffix);
				}
			}

			$(el).keyup(function() { truncate(); });
			truncate();
		});

		return this;
	};

}(jQuery));

// DOM is ready
$(function () {
    // field with the name attribute title
    $("[name='meta_title']").truncate({
        characters: 55,
        prefix: 'You have',
        suffix: ' character(s) left'
    });

});
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...