Databases
StackOverflow2013
Postsdbo
PONot able to break a line inside a textarea where text wraps off and moves to next line
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONot able to break a line inside a textarea where text wraps off and moves to next line
    primarykey
    data
    text
    <p>I am building a web app for personalised merchandise. Requirement is to provide few text boxes to the user to get the input, push exactly the same format to the server and get it processed.I have textareas to take the inputs but have been struggling to push the same format as we see it in the browser. </p> <p>Once the text exceeds the line width in the textarea, it moves on to another line. User would see the text spread across multiple lines though its one complete string. I plan to insert new line breaks at these points so that the text could be broken across multiple lines and that way I will be able to push the text in the same format to the server but its giving me a tough time.</p> <p>Options provided to the user are fonts and their different sizes. Even for the same fontsize one line in the text area can accommodate different number of characters based on the width of the character typed. This is making the content unpredictable for breaking the line based on any pre-determined max character length.</p> <p>I am somewhat able to achieve it if I hardcode the number of characters in a line and add '\n' through javascript but as I mentioned above this is spoiling the output. I am able to add new line breaks but only at hardcoded limits. Since characters have different widths, same constraint is not working correctly.</p> <p>Example 1: Inside textarea:</p> <blockquote> <p>Grumpy wizards make toxic brew for<br> the evil Queen and Jack.</p> </blockquote> <p>Line wraps off after "brew for". When this text area content gets processed against a char limit of 34, the output I get is:</p> <blockquote> <p>Grumpy wizards make toxic brew for<br> the evil Queen and Jack.</p> </blockquote> <p>Perfect replica as it looked in the text box, this is what was needed. Lets look at the next instance:</p> <p>Example 2: Inside text area:</p> <blockquote> <p>GRUMPY WIZARDS MAKE TOXIC BREW<br> FOR THE EVIL QUEEN AND JACK.</p> </blockquote> <p>Line wraps immediately after "BREW". When this text area content gets processed, the output is:</p> <blockquote> <p>GRUMPY WIZARDS MAKE TOXIC BREW FOR<br> THE EVIL QUEEN AND JACK.</p> </blockquote> <p>So as we see, though the line break occurred inside the text box immediately after "TOXIC BREW" what I could achieve was a break after "TOXIC BREW FOR" due to the hardcoded char limit. Not the same as I wanted.</p> <p>So relying on a predetermined length and then adding '\n' to the respective break off points through javascript is not helping me out. Is there a way to detect where exactly the text gets wrapped so that I can precisely add new line breaks at those points? Not sure, if there is any better way to achieve the same? </p> <p>Any help/pointers will be highly appreciated.</p> <hr> <p>EDITED:</p> <p>CSS:</p> <pre><code>textarea#lpt { height: 150px; width: 50%; border: 1px solid rgb(204, 204, 204); /*font-size:20px;*/ } </code></pre> <p>JS: (Reference <a href="https://stackoverflow.com/questions/14484787/wrap-text-in-javascript">Wrap Text In JavaScript</a>)</p> <pre><code>function stringDivider(str, width, spaceReplacer) { if (str.length&gt;width) { var p=width for (;p&gt;0 &amp;&amp; str[p]!=' ';p--) { } if (p&gt;0) { var left = str.substring(0, p); var right = str.substring(p+1); return left + spaceReplacer + stringDivider(right, width, spaceReplacer); } } return str; } $(document).ready(function(){ $('#submit_text').click(function(){ text = $('#lpt').val(); alert("Original text submitted is: "+ "\n"+text); textWithBreaks = stringDivider(text, 34, "\n"); alert("Processed Text is : "+"\n"+textWithBreaks); }); }); </code></pre> <p>Adding a fiddle (<a href="http://jsfiddle.net/beetleport/aR2YH/2/" rel="nofollow noreferrer">http://jsfiddle.net/beetleport/aR2YH/2/</a>) to demonstrate the scenario. Font size can be increased or decreased, the appearance in the text box changes but the output will be the same due to char limit. StringDivider function is a sample reference from another post on stack overflow.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USbeetleport
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PONot able to break a line inside a textarea where text wraps off and moves to next line
      1. This table or related slice is empty.
      1. VTUpMod
    1. COwoowow....too big a question....you mind showing the css/html too?
      singulars
      1. PONot able to break a line inside a textarea where text wraps off and moves to next line
      1. This table or related slice is empty.
    2. COcan you show your `javascript`?
      singulars
      1. PONot able to break a line inside a textarea where text wraps off and moves to next line
      1. USBaby
    3. COHave added the css/js excerpts.
      singulars
      1. PONot able to break a line inside a textarea where text wraps off and moves to next line
      1. USbeetleport
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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