Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The solution of Flash Thunder is very beautiful, </p> <ol> <li>but in case where a user type <strong>%_%</strong> string anywhere in textarea, the answer may have trouble to handle.</li> <li>The last typed character is not taken into account.</li> </ol> <p>I've worked out a solution that is more primary, that is abandoned. But after reflection, and tested in Google Chrome, I give it here:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { // My text area $("#inf_notes").bind('keyup', function () { var maxLength = 240; var strInput = $(this).val(); var lng = strInput.length; if (lng &lt;= 60) { // The first 60 caracters $('#inf_notes_1').val(strInput); $('#inf_notes_2').val(""); $('#inf_notes_3').val(""); $('#inf_notes_4').val(""); } else if (lng &gt; 60 &amp;&amp; lng &lt;= 120) { // If more then 60, fill the second field $('#inf_notes_1').val(strInput.substring(0, 60)); $('#inf_notes_2').val(strInput.substring(60, lng)); $('#inf_notes_3').val(""); $('#inf_notes_4').val(""); } else if (lng &gt; 120 &amp;&amp; lng &lt;= 180) { // If more then 120, fill the third field $('#inf_notes_1').val(strInput.substring(0, 60)); $('#inf_notes_2').val(strInput.substring(60, 120)); $('#inf_notes_3').val(strInput.substring(120, lng)); $('#inf_notes_4').val(""); } else if (lng &gt; 180 &amp;&amp; lng &lt;= 240) { // If more then 180, fill the fourth field $('#inf_notes_1').val(strInput.substring(0, 60)); $('#inf_notes_2').val(strInput.substring(60, 120)); $('#inf_notes_3').val(strInput.substring(120, 180)); $('#inf_notes_4').val(strInput.substring(180, lng)); } if(lng &gt; maxLength) { $('#inf_notes_1').val(strInput.substring(0, 60)); $('#inf_notes_2').val(strInput.substring(60, 120)); $('#inf_notes_3').val(strInput.substring(120, 180)); $('#inf_notes_4').val(strInput.substring(180, 240)); $(this).val($(this).val().substring(0, maxLength)); $('.alert_textarea').show(); // Simple alert } else { $('.alert_textarea').hide(); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;input id="inf_notes_1" type="text" size="80" /&gt;&lt;br&gt; &lt;input id="inf_notes_2" type="text" size="80" /&gt;&lt;br&gt; &lt;input id="inf_notes_3" type="text" size="80" /&gt;&lt;br&gt; &lt;input id="inf_notes_4" type="text" size="80" /&gt;&lt;br&gt; &lt;textarea id="inf_notes" style="width: 500px; height: 100px;"&gt;&lt;/textarea&gt; &lt;/form&gt; &lt;div class="alert_textarea" style="display:none;"&gt;Your text is too long!&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>It's based only on the length and .substring() method, </p> <ol> <li>can handle any user input, including "%_%" tricky and breaking string.</li> <li>you must use <strong>keyup</strong> event, instead of keydown or keypress, so the last typed character is not neglected.</li> <li>We shall renew input text with each "keyup" in case the user press the key continuously without releasing it.</li> </ol>
 

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