Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Changaco opened this issue Jun 16, 2022 · 6 comments · May be fixed by #2162
Open

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

Changaco opened this issue Jun 16, 2022 · 6 comments · May be fixed by #2162
Labels
good first issue suitable for new contributors JavaScript issues that involve JavaScript code

Comments

@Changaco
Copy link
Member

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.

@Changaco Changaco added good first issue suitable for new contributors JavaScript issues that involve JavaScript code labels Jun 16, 2022
@biskwikman
Copy link
Contributor

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
Copy link
Member Author

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
Copy link
Contributor

@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
Copy link
Member Author

Changaco commented Jul 4, 2022

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
Copy link
Contributor

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
Copy link
Member Author

Changaco commented Jul 8, 2022

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.

@biskwikman biskwikman linked a pull request Jul 10, 2022 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue suitable for new contributors JavaScript issues that involve JavaScript code
Development

Successfully merging a pull request may close this issue.

2 participants