Javascript – Max length for HTML </h1> </header> <p style='font-size:1.2em'><span class="mr-2 badge badge-success">cross-browser</span><span class="mr-2 badge badge-info">html</span><span class="mr-2 badge badge-warning">javascript</span><span class="mr-2 badge badge-primary">textarea</span></p> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1962880864575776" data-ad-slot="5740873733" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="entry-content"> <p>How to restrict the maximum number of characters that can be entered into an HTML <code><textarea></code>? I'm looking for a cross-browser solution.</p> </div> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1962880864575776" data-ad-slot="5740873733" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="comments" class="comments-area"> <div class="row"> <div class="col-12"> <div class="mt-3 border-bottom border-success"> <h4 class="text-success"><i class='fa fa-check-circle text-success mr-3'></i><span>Best Solution</span></h4> </div> <div class='bg-transparent mb-3'> <p>The <code>TEXTAREA</code> tag does not have a <code>MAXLENGTH</code> attribute the way that an <code>INPUT</code> tag does, at least not in most standard browsers. A very simple and effective way to limit the number of characters that can be <em>typed</em> into a <code>TEXTAREA</code> tag is:</p> <pre><code><textarea onKeyPress="return ( this.value.length < 50 );"></textarea> </code></pre> <p><strong>Note:</strong> <code>onKeyPress</code>, is going to prevent any button press, <strong>any button</strong> <em>including</em> the backspace key.</p> <p>This works because the Boolean expression compares the field's length before the new character is added to the maximum length you want (50 in this example, use your own here), and returns true if there is room for one more, <code>false</code> if not. Returning false from most events cancels the default action. So if the current length is already 50 (or more), the handler returns false, the <code>KeyPress</code> action is cancelled, and the character is not added.</p> <p>One fly in the ointment is the possibility of pasting into a <code>TEXTAREA</code>, which does not cause the <code>KeyPress</code> event to fire, circumventing this check. Internet Explorer 5+ contains an <code>onPaste</code> event whose handler can contain the check. However, note that you must also take into account how many characters are waiting in the clipboard to know if the total is going to take you over the limit or not. Fortunately, IE also contains a clipboard object from the window object.<a href="http://lists.evolt.org/archive/Week-of-Mon-20040315/156773.html" rel="nofollow noreferrer">1</a> Thus:</p> <pre><code><textarea onKeyPress="return ( this.value.length < 50 );" onPaste="return (( this.value.length + window.clipboardData.getData('Text').length) < 50 );"></textarea> </code></pre> <p>Again, the <code>onPaste</code> event and <code>clipboardData</code> object are IE 5+ only. For a cross-browser solution, you will just have to use an <code>OnChange</code> or <code>OnBlur</code> handler to check the length, and handle it however you want (truncate the value silently, notify the user, etc.). Unfortunately, this doesn't catch the error as it's happening, only when the user attempts to leave the field, which is not quite as friendly.</p> <p><a href="http://lists.evolt.org/archive/Week-of-Mon-20040315/156773.html" rel="nofollow noreferrer">Source</a></p> <p>Also, there is another way here, including a finished script you could include in your page:</p> <p><a href="http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html" rel="nofollow noreferrer">http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html</a></p> </div> </div> <div class="col-4"></div> </div> </div> <div id="related-embeded" class="related-embeded-area"><div class="row"><div class="col-12"><div class="mt-3 border-bottom border-success"><h4 class="text-info"><i class='fa fa-check-circle text-info mr-3'></i><span>Related Solutions</span></h4></div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnote.com/tecnote/javascript-how-to-create-a-guid-uuid/'>Javascript – How to create a GUID / UUID</a></h5></div><div class='bg-transparent mb-3'> <p><em>[Edited 2021-10-16 to reflect latest best-practices for producing RFC4122-complaint UUIDs]</em></p> <p>Most readers here will want to use <a href="https://www.npmjs.com/package/uuid" rel="noreferrer">the <code>uuid</code> module</a>. It is well-tested and supported.</p> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID" rel="noreferrer"><code>crypto.randomUUID()</code></a> function is an emerging standard that is supported in <code>Node.js</code> and <a href="https://caniuse.com/mdn-api_crypto_randomuuid" rel="noreferrer">an increasing number of browsers</a>.</p> <p>If neither of those work for you, there is this method (based on the original answer to this question): </p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>function uuidv4() { return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); } console.log(uuidv4());</code></pre> </div> </div> <p></p> <p>Note: <strong>The use of <em>any</em> UUID generator that relies on Math.random() is strongly discouraged</strong> (including snippets featured in previous versions of this answer) for <a href="https://bocoup.com/blog/random-numbers" rel="noreferrer">reasons best-explained here</a>. TL;DR: Math.random()-based solutions do not provide good uniqueness guarantees.</p> </div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnote.com/tecnote/javascript-how-to-get-a-timestamp-in-javascript/'>Javascript – How to get a timestamp in JavaScript</a></h5></div><div class='bg-transparent mb-3'> <h1>Short & Snazzy:</h1> <pre><code>+ new Date() </code></pre> <p>A unary operator like <code>plus</code> triggers the <code>valueOf</code> method in the <code>Date</code> object and it returns the timestamp (without any alteration).</p> <p><strong>Details:</strong></p> <p>On almost all current browsers you can use <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.4.4" rel="noreferrer"><code>Date.now()</code></a> to get the UTC timestamp in <strong>milliseconds</strong>; a notable exception to this is IE8 and earlier (see <a href="http://kangax.github.io/compat-table/es5/#Date.now" rel="noreferrer">compatibility table</a>).</p> <p>You can easily make a shim for this, though:</p> <pre><code>if (!Date.now) { Date.now = function() { return new Date().getTime(); } } </code></pre> <p>To get the timestamp in <strong>seconds</strong>, you can use:</p> <pre><code>Math.floor(Date.now() / 1000) </code></pre> <p>Or alternatively you could use:</p> <pre><code>Date.now() / 1000 | 0 </code></pre> <p>Which should be slightly faster, but also less readable.<br/> (also <a href="https://stackoverflow.com/questions/7487977/using-bitwise-or-0-to-floor-a-number">see this answer</a> or <a href="https://stackoverflow.com/a/11446757/1519836">this</a> with further explaination to bitwise operators).</p> <p>I would recommend using <code>Date.now()</code> (with compatibility shim). It's slightly better because it's shorter & doesn't create a new <code>Date</code> object. However, if you don't want a shim & maximum compatibility, you could use the "old" method to get the timestamp in <strong>milliseconds</strong>:</p> <pre><code>new Date().getTime() </code></pre> <p>Which you can then convert to seconds like this:</p> <pre><code>Math.round(new Date().getTime()/1000) </code></pre> <p>And you can also use the <code>valueOf</code> method which we showed above:</p> <pre><code>new Date().valueOf() </code></pre> <p><strong>Timestamp in Milliseconds</strong></p> <p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var timeStampInMs = window.performance && window.performance.now && window.performance.timing && window.performance.timing.navigationStart ? window.performance.now() + window.performance.timing.navigationStart : Date.now(); console.log(timeStampInMs, Date.now());</code></pre> </div> </div> <p></p> </div></div></div></div> </div> <div class="col-12 col-md-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1962880864575776" data-ad-slot="5946106761" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class='mt-3 ml-4 border-bottom border-success'><h6><span>Related Question</span></h6></div><ul class='list-group list-group-flush'><li class="list-group-item"><a href='https://itecnote.com/tecnote/html-how-to-align-checkboxes-and-their-labels-consistently-cross-browsers/'>Html – How to align checkboxes and their labels consistently cross-browsers</a></li><li class="list-group-item"><a href='https://itecnote.com/tecnote/javascript-var-functionname-function-vs-function-functionname/'>Javascript – var functionName = function() {} vs function functionName() {}</a></li><li class="list-group-item"><a href='https://itecnote.com/tecnote/javascript-what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it/'>Javascript – What does “use strict” do in JavaScript, and what is the reasoning behind it</a></li><li class="list-group-item"><a href='https://itecnote.com/tecnote/html-5-is-it-or/'>HTML 5: Is it <br>, <br/>, or <br /></a></li><li class="list-group-item"><a href='https://itecnote.com/tecnote/html-what-characters-can-be-used-for-up-down-triangle-arrow-without-stem-for-display-in-html/'>Html – What characters can be used for up/down triangle (arrow without stem) for display in HTML</a></li><li class="list-group-item"><a href='https://itecnote.com/tecnote/html-how-to-create-an-html-button-that-acts-like-a-link/'>Html – How to create an HTML button that acts like a link</a></li><li class="list-group-item"><a href='https://itecnote.com/tecnote/javascript-pretty-print-json-using-javascript/'>Javascript – pretty-print JSON using JavaScript</a></li><li class="list-group-item"><a href='https://itecnote.com/tecnote/html-why-does-html-think-chucknorris-is-a-color/'>Html – Why does HTML think “chucknorris” is a color</a></li></ul> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1962880864575776" data-ad-slot="1527980765" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <footer class="entry-footer"> </footer> </article> </div> </div> </div> </main> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info"> </div> </footer> </div> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js?ver=4.3.1' id='bootstrap4-js'></script> <script type='text/javascript' src='https://itecnote.com/wp-content/themes/idream/js/idream.js?ver=2.2.88' id='idream-common-js'></script> </body> </html>