I have a bootstrap theme that sits on top of the framework. Problem is that the theme is being ignored. It's load the styling for the default bootstrap labels. I've changed the colors, font and padding on my theme label classes. If I insert a label right after the input it is rendered properly. Any ideas? DOM loading issue perhaps?

Bower fail to resolve dependencies because the version declared in your bower.json is 1.4.2 but the release version is 1.5.0.

See https://github.com/mimo84/bootstrap-maxlength/blob/1.5.0/bower.json

Text input thows error on removing characters in modal popup : TypeError: maxLengthIndicator is undefined
Line 199, method manageRemainingVisibility:
maxLengthIndicator.html(updateMaxLengthHTML(maxLengthCurrentInput, (maxLengthCurrentInput - remaining)));
Seems to be my buggy code.

I am not sure it's a bug or my my failt,
when resizing window, error waw shown like below
"Uncaught TypeError: Cannot call method 'outerWidth' of undefined "

if I focus the input at first, resizing the window will not show this error.

So, at line 276 of source file, I added below

if(maxLengthIndicator === undefined) return;

the error disappeared.

I am using your library for my web-based game data editor, but I ran into an issue with block-level form inputs: the badge was being displayed off the side of the site.

I adjusted the defaults array to have a location: 0 and then changed the focus function to:

currentInput.focus(function() {
    var currentInputTopPx = 0,
    currentInputLeftPx = 0,
    remaining = remainingChars(currentInput, maxLengthCurrentInput);

    manageRemainingVisibility(remaining, currentInput, maxLengthCurrentInput, maxLengthIndicator)

    switch(options.location)
    {
        case 0: // default, outside bottom right
        {
            currentInputTopPx = currentInput.offset().top + currentInput.outerHeight();
            currentInputLeftPx = currentInput.offset().left + currentInput.outerWidth();
            break;
        }

        case 1: // outside top right
        {
            currentInputTopPx = currentInput.offset().top - maxLengthIndicator.height();
            currentInputLeftPx = currentInput.offset().left + currentInput.outerWidth();
            break;
        }

        case 2: // outside top left
        {
            currentInputTopPx = currentInput.offset().top - maxLengthIndicator.height();
            currentInputLeftPx = currentInput.offset().left - maxLengthIndicator.outerWidth();
            break;
        }

        case 3: // outside bottom left
        {
            currentInputTopPx = currentInput.offset().top + currentInput.outerHeight();
            currentInputLeftPx = currentInput.offset().left - maxLengthIndicator.outerWidth();
            break;
        }

        case 4: // inside centered right
        {
            currentInputTopPx = currentInput.offset().top + (maxLengthIndicator.height() / 2);
            currentInputLeftPx = currentInput.offset().left + currentInput.outerWidth() - maxLengthIndicator.outerWidth() - 3;
            break;
        }
    }

    maxLengthIndicator.css({
        top: currentInputTopPx + 'px',
        left: currentInputLeftPx + 'px',
        zIndex: 999999999
    });
});

It still allows me to keep typing in a textarea in IE8 after the limit has been reached.

It seems, that different browsers treat newlines differently. For example, Firefox on Mint puts the value \r\n no enter keypress, but counts them as only 1 symbol towards the char-count. Chrome has its own, weird way of doing theses things.

Now, I have created a couple of utility functions, to help me with these cases, and I was wondering, do you want them added? The main question is about the ideology, do we try to manage this length, or leave it up to browsers to deal with this?

Great plug-in. Thanks very much for putting it together and making it available.

I'd like to suggest/request some additional "placement" options that would expand on the corner options currently supported. These options would justify the badge/counter with the edge of the input field. So, for example, "bottom-right-justified" would place the badge at the bottom right of the input field (as it currently does) but with the right border of the badge justified with the right border of the input field. Similarly, "top-left-justified" would left justify the left borders of the badge and the field.

Thanks again for a great product.

I have a form with textfield.
Depending on what other fields are filled in, the maxlength of the textfield is changed.

When i first instantiate bootstrap-maxlength on the textfield, it works ok, but if i change the maxlength of that field, the plugin doesn't update.

Hello,

Would it be possible to implement functionality to allow exceeding the maxlength limit?

I assume this would require actually removing the attribute from the document so that the browser does not enforce the limit itself, then use the limit as a criterion only for styling the label.

Thanks

When I combine "AtWho" plugin with this "maxlength" plugin, I got an issue that a character indicator label is generated whenever there is a "focus" event triggered on the target input/textarea element.

Although, in real world, "blur" event should always triggered naturally first before we can trigger "focus" event again.

However, there will be a lot cases that a developer want to call "focus" to enforce focus behaviour but they forget to check whether the target element is already in focus mode or not.

Thus, it would be better to do a safe protection in this plugin in my opinion.

BTW:
I too have raised an issue to suggest "atWho" plugin to do a check to avoid unnecessary "setFocus".

Suggested Solutions:

1) a new method to safe remove existing indicator if any

                function safeRemoveIndicator() {
                    if (maxLengthIndicator) {
                        maxLengthIndicator.remove();
                        maxLengthIndicator = null;
                    }
                }

2) before create a new one, safe delete it

                currentInput.focus(function () {
                    var maxlengthContent = updateMaxLengthHTML(maxLengthCurrentInput, '0');
                    maxLengthCurrentInput = getMaxLength(currentInput);

                    safeRemoveIndicator();  <-- safe delete existing one if exists

                    maxLengthIndicator = $('<span class="bootstrap-maxlength"></span>').css({
                        display: 'none',
                        position: 'absolute',
                        whiteSpace: 'nowrap',
                        zIndex: 1099
                    }).html(maxlengthContent);

3) safe delete it when blur

                currentInput.blur(function() {
                    safeRemoveIndicator();
                });

Is this support UTF8 characters like chinese,korean,japanese,etc ?

Is there a way to have a minlength ?
thaks !

We have noticed that sometimes when you paste text into the the text area it will go over the length by a few characters. It will show for example "603 of 600" and if you delete the 3 characters it will again enforce the limit. While we have not been able to reproduce it consistently it has been experienced by several people on our team.

Showing http://mimo84.github.io/bootstrap-maxlength/ to people is a little embarrassing right now, since the examples are broken. One glaring error is the limitReachedClass is set to label label-important which doesn't exist in bootstrap anymore (I believe you want label label-danger), so it just goes away. It's a much easier sell to others when they see it fully working.

If there's a way I can fix this myself, I'd be happy to fork and do it, I just didn't see anything obvious.

Similar to the TAB problem (issue #17), could you also allow selecting with the keyboard even if the limit is reached?

Max-length indicator stays on the same place on scrolling event in bootstrap modal dialog.

Type to max length, move away from input with keyboard (TAB), then back into int (SHIFT-TAB), you can type past the max length. The popup count also gets messed up.

Hello, I am having an issue where the input is continuously returning "NaN" I have been diving into the source and trying to debug what is actually happening and I am stuck. Here is the setup I have in my main script:

    $('textarea#charCount').maxlength({
        alwaysShow: true,
        threshold: 140,
        warningClass: "label label-info",
        limitReachedClass: "label label-warning",
        placement: 'bottom-right',
        preText: 'used ',
        separator: ' of ',
        postText: ' chars.'
    });

• Define input text with maxlength = 50
• Initialize bootstrap
• change Firefox/IE/Chrome with alt TAB at least two times
• ==> Max length will be changed

Globally, i don't think than it's a good idea to change defined maxlength

i've removed following code and it works :
// Handle the tab press when the maxlength have been reached.
// if (remaining===0 && keyCode===9 && !e.shiftKey) {
// currentInput.attr('maxlength',getMaxLength(currentInput)+1)
// .trigger({
// type: 'keypress',
// which: 9
// }).attr('maxlength',getMaxLength(currentInput)-1);

// }
// if (options.validate && remaining < 0) {
// output = false;
// } else {
manageRemainingVisibility(remaining, currentInput, maxLengthCurrentInput, maxLengthIndicator);
// }

maxlength for wysiwyg editor

Check if there are possibilities to add.

Some situations as personal document, the user must press TAB to go to the next field.

When typing on ios the counter isn't being updated

What would be the best way to handle a user resizing the textarea so the indicator moves to the new position?

I'm using this with an autogrow plugin for a normal textarea(no wysiwyg). The problem is that when the textarea's height changed whilst typing the position of the counter stays in the same position. If the counter was added to the bottom of the textarea than this would solve the problem. Unless of course you have another solution.

Thanks.

Hi!
When pasting text to text field or textarea it doesn't count the letters. i have to edit the text and only then it starts to count

Thanks!

index.html document in the root folder of the project is empty. It is weird, as it should be the same document rendered when accessing http://mimo84.github.io/bootstrap-maxlength/

When used in a modal form the badge doesn't stick to the input field when scrolling.

Sometimes I get this error and I have absolutely no clue where it is coming from.
I think it could have to do that some of my form fields are hidden, but I can not determine any pattern (I don't get it always on the same page and same code).

TypeError: maxLengthIndicator is undefined
outerWidth = maxLengthIndicator.outerWidth(),

In my case, I am using bootstrap modal dialog for example, if I have a long page, even with a modal dialog opening, I can still scroll the page body behind.

Then, we will see the character indicator is scrolling along with page body because it is using "position:absolute" for positioning. please see screen shot below.

To solve this issue, I did two things together, one thing is the issue #45 which I raised for self protection.

Then, based on #45 , I changed my outside code to listen to the scroll event, when first scroll event happening, I saved the current focused element and call his "blur" event to destroy the label, then, after scroll complete, I called the element with "focus" event to recreate the label, then the new label will take the right position for sure.

However, since in #45 with isolated context, you choose to reuse existing label which means the label's position will not change, thus, that solution can't be used along with this issue.

Anyway, a proposed solution might be:

1. better plugin internally listen to scroll event, when scroll event starts, hide/destroy the label
2. when scroll events complete, re-calculate the position and then show/new the label.

Similar code like below

    function HandlingScrolledEvent() {
         // show/new the label
    }

    var timerHandle;
    function throttlingScrollEvents() {
        if(timerHandle) {
            window.clearTimeout(timerHandle);
            timerHandle = null;
        }

       // hide/destroy existing label
        timerHandle = window.setTimeout(HandlingScrolledEvent, 500);
    }

    //listen to global scroll event
    $(window).scroll(throttlingScrollEvents);

Thanks for the nifty plugin!

I was wondering if there is any way I can obtain the length of the currentInput or 'character count left' value from the onSafeCount() or onOverCount() functions?

Right now, when the counter is over the limit it displays a negative value. I would want to obtain the value and display it as a positive with a changed message, such as: '5 characters over the limit' rather than '-5 characters left'.

Thanks in advance!

Hi there, hope you can help.

I am using the plugin on textareas that are being dynamically generated by cloning from a template. The template counter works perfectly (awesome plugin by the way!!!) because it is natively in the html. But when it creates a clone, the elements are generated in the DOM dynamically and so the plugin doesn't work because, I'm thinking, it doesn't recognize the new elements as existing. Am not very familiar with jquery, so wouldn't really know how to create a function to get around this.

Jquery's .on function doesn't seem to work. I tried this by calling it at the bottom of the page it's on:

$(document).on('ready', function() {
        $("textarea").characterCounter({
            limit: 120
        });
    });

I'm pretty sure that's not sematically correct, but I don't have a clue how else to do it. If anyone has any answers, I'd be forever in your debt :)

Thanks!

title says ist all...

If < body > has a "margin-top" in the CSS, indicator's position won't work correctly.
(I assume it's the same with margin-left).

If you hold the character, the character count is not updated until it is released or it reaches the limit.

Could you add an option to not count leading and trailing white spaces?

Hello,

I need to add an true/false option to plugin for restricting character entry on over reached limit case.

This case is happening on server side value entry on textfields and the remaining character count becomes under zero. Then it is impossible to select a word/sentence and replace it by typing a character.

The first thing that comes to my mind is to fork your project but maybe you can add me to contibuters list and I would be happy to make such developing on base project.

Regards.

Would it be possible to add an option to ignore line breaks (CR+LF) completely in the character counting (or possibly append this option to Sajus's ignoreBreaks commit)?

Thanks,

Hello,
If you use https, the demo page is not working. It uses a secure protocol (https) and all the include files are in non-secure protocol (http). Modern browsers does not include unsecure files on secure main file.

Solution 1: use protocol-relative urls:
instead of

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

use

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Solution 2: use secure protocol
instead of

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

use

https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Regards

I am using bootstrap 2.3.2.
The modal dialog has a z-index of 1070, and bootstrap-maxlength has 999, so it is below the modal dialog.
Could you set the z-index of bootstrap-maxlength to 1099?

I have an app . And I know how to upload this js. Any idead how to use it with GWT??

The logic of inputLength() checks if there is any newline/enter. And if there is any newline or enter it captures this via break counts.

Now the issue with this is that, once I hit enter button, it capture the count as 1+1; Which is incorrect.

Check the below link for the sample demo that I've created, one with ignore breaks and one with considering breaks, try hitting enter and see the count.

http://jsfiddle.net/sajus/Z8Bmn/

Hello, Instead of this:

separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.'

There could be just one option, like:

label: 'You have %r (remains) of %t (total) chars remaining'

Best,
Alex

The plugin works properly to begin with

but if I then send a message


the characters remaining message doesn't refresh until I either start typing a new message, or receive one.

I found this plugin in web and this plugin work with textarea,

but one does not work in conjunction with each other.

https://github.com/jhollingworth/bootstrap-wysihtml5

I would greatly appreciate it if you give me a help to make them work together.

Thanks in advance.

It would be great if we could completely remove the plugin footprint with a destroy method (like for any jquery UI widget)

$('*[maxlength]').maxlength('destroy');

Display 4 remain, but can't input any more.
chrome version:36.0.1985.125 m

$('textarea[maxlength]').maxlength({
alwaysShow : true,
placement: 'bottom-left-inside',
message: '%charsRemaining% characters remaining'
});