StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>A bank in Scandinavia recently had a lawsuit because a customer accidentally transferred a pile of money to the wrong account because she typed in too many zeros into the account number. This made the resulting account number invalid, however she didn't notice because the web-application silently erased her extra digit. So she entered something like </p> <pre><code>1223300045 </code></pre> <p>but should have entered</p> <pre><code>122330045 </code></pre> <p>and consequently account </p> <pre><code>122330004 </code></pre> <p>received her money. <strong>This is a major usability flaw.</strong></p> <p>In the case of something like a text-area, take a look at StackOverflow's own comments UI. It shows you how much text is in your textbox, and you have the opportunity to edit your text, but the really sweet part is that you can type as much as you want, then edit down to the bare limit, letting you ensure you can say all you like. If your text box erases the user's text:</p> <ul> <li>They may not notice it happening, if they type by looking at the keyboard</li> <li>They have to erase text before they can add new, more concise wording</li> <li>They will be annoyed</li> </ul> <p>Thus, my recommendation is to let the user type as much they want, but let them know when they are over the limit, and let them edit. The following sample can get you started. You should change the selectors as appropriate to only manipulate the textareas/text inputs you need to. And don't forget to do the appropriate thing if the limit is wrong. This sample sets a class; the class attribute lets you change the colour of the textarea (or whatever). You might want to show a message or something. They key is to let the user keep typing.</p> <pre><code>function checkTALength(event) { var text = $(this).val(); if(text.length > 140) { $(this).addClass('overlimit'); } else { $(this).removeClass('overlimit'); } } function checkSubmit(event) { if($('.overlimit', this).length > 0) { return false; } } $(document).ready(function() { $('textarea').change(checkTALength); $('textarea').keyup(checkTALength); $('form').submit(checkSubmit); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload