Textarea Character Limit

[kulonuwun]

Is there anyway to limit the character on textarea ?? didn't work whe we use simpleMDE.</p> <p>I also try to combine with other JS such as <a rel="noreferrer nofollow" target="_blank" href="http://stackoverflow.com/questions/5533053/textarea-character-limit">http://stackoverflow.com/questions/5533053/textarea-character-limit</a> </p> <p>but still didn't work. Any solution would be appreciated.</p> <p>Thanks brother</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lupas"><img src="https://avatars.githubusercontent.com/u/4020037?v=4" />lupas</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>I'd love this as a configuration option as well, especially since <code>maxlength="50"</code> doesnt work on <code><textarea></code> anymore with this simple-mde.</p> <p>My solution so far is the following, just disabling the submit-button when the limit is reached: </p> <pre><code><script> char_limit = 50; var simplemde = new SimpleMDE({ status: [ { className: "chars", defaultValue: function(el) { el.innerHTML = "0 / "+char_limit; }, onUpdate: function(el) { el.innerHTML = simplemde.value().length + " / "+char_limit; limit_characters() } }] }); function limit_characters() { character_count = simplemde.value().length if (character_count > char_limit) { $('#submitBtn').attr("disabled", true); } else { $('#submitBtn').attr("disabled", false); } } </script></code></pre> <p>Don't forget to add id="submitBtn" to the button element and disable it by default.</p> <p>Not the best solution I know, but the only one I came up with.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/amirhilal"><img src="https://avatars.githubusercontent.com/u/2302747?v=4" />amirhilal</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Updating @lupas code for lines as well, if anyone wants it</p> <pre><code>lines_limit = 15;</code></pre> <p>should give you lines count</p> <pre><code>{ className: "lines", defaultValue: function(el) { el.innerHTML = "Lines 0 / "+lines_limit; }, onUpdate: function(el) { el.innerHTML = " Lines "+ simplemde.codemirror.lineCount() + " / "+lines_limit; limit_characters() //update this function according to lines_count = simplemde.codemirror.lineCount(); } }]</code></pre> <p>Sorry if it is messy, I copied from my code and edited directly here</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/martinrue"><img src="https://avatars.githubusercontent.com/u/473950?v=4" />martinrue</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Just ran into this myself and discovered that you can listen to the <code>codemirror</code>'s <code>beforeChange</code> event, which receives a <code>change</code> argument (<a href="https://codemirror.net/doc/manual.html#events">https://codemirror.net/doc/manual.html#events</a>). </p> <p>If you're trying to implement a max length, you can simply check the SimpleMDE instance <code>.value().length</code> and call <code>change.cancel()</code> if it exceeds some limit.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guifeliper"><img src="https://avatars.githubusercontent.com/u/14844155?v=4" />guifeliper</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>My solution for the @martinrue comment. It is working for me.</p> <pre><code>editor.codemirror.on('beforeChange', (instance, changes) => { if(editor.value().length > 5000 && changes.origin !== "+delete"){ changes.cancel(); setErrorMessage($el, 'Too big'); // A visual effect for the user } if(editor.value().length <= 5000 && changes.origin == "+delete"){ resetErrorMessage($el); } });</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/infinite-persistence"><img src="https://avatars.githubusercontent.com/u/64950861?v=4" />infinite-persistence</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Need to cover various corner-cases like pasting, highlight+paste, partialHighlight+paste, etc. </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>