Text inputs don't show the current character count / remaining number of allowed characters

[Changaco]

This issue is about making our <input> and <textarea> elements more dynamic by adding a little bit of client-side JavaScript. The static hint Maximum length is {0}. should be automatically replaced by a dynamic hint.

[biskwikman]

Does this mean that instead of, for example "Maximum length is 64" it would say "64 characters remaining" or something like that? And would go down by one with each character.

[Changaco]

Yes. The JavaScript code should also disable the standard browser behaviour of preventing/truncating input beyond the maximum length. It can do that by removing the HTML element's maxlength attribute after setting up the dynamic hint.

[biskwikman]

@Changaco
I'm having a hard time figuring out how the javascript code is implemented. From what I can tell js code is stored in the js folder, but then how is it invoked? I can't find any of the method names elsewhere in the project.

[Changaco]

The entry point is the call to Liberapay.init() when the page has finished loading. JavaScript functions are only called from other JavaScript functions, they can't be called from the HTML code due to the Content Security Policy.

[biskwikman]

Oof, I've been working on this but I just realized I had been getting the max length for the javascript code from the html maxlength attribute. But if that attribute needs to be deleted, I'm not so sure I'm on the right track. Is there another attribute that can be used to store the relevant xxx_MAX_SIZE python variable?

Here's my javascript function for reference:

    $('input').on('input', function() {
        var maxLength = $(this).attr('maxlength') - $(this).val().length;
        var helpBlock = $(this).siblings('.help-block');
        if (helpBlock.text().slice(0, maxLength.toString.length+1) == maxLength + 1){
            helpBlock.text(function (index, value) {
               return value.slice(maxLength.toString.length+1);
            })
        }
        helpBlock.prepend(maxLength + ' ');
    })
``

[Changaco]

Whatever needs to be passed from the Python server-side code to the JavaScript client-side code can be put in data-* attributes and retrieved with jQuery's .data method.

To be clear, the maxlength attribute must be removed dynamically by the JS code, not removed from the HTML generated by the server.