Add linebreak with jQuery at end of each textarea row - javascript

So I have been googleing around for a couple of days but I have not found a solution so far, so I'm turning to you guys with hope that there even is a possible solution for this.
I need to, at the end of each line in a textarea add a linebreak before it is sent to PHP. That is, even if the user does not press enter but if a word get's cut of or it just jumps down a row because it has filled the with of the textarea. And I need to do so with jQuery or Javascript.
Does anyone have any good ideas on how to do so?
Thanks!
Update: Keep in mind that I also need to send the text via a json encoded string with Ajax to PHP. I should have mentioned that!

Try this:
http://jsfiddle.net/r7JBe/2/

Textarea element has COLS attribute, which means maximum number of characters per line. Browser will jump the word that includes the (COLS+1)th character. You could write a piece of javascript that roughly does something like this.
Have a counter to calculate characters since last linebreak.
Loop through the string character by character.
If you see a linebreak, reset counter.
If you see a 21th character since last linebrak (or beginning), go backwards until you see beginning of the word (space for example) add linebread and reset counter and continue.
Else increase counter
Notice that wrapping the line is part of the browsers logic, so if you want it exactly as in browser, you may have to research every browser (for example what they consider as word-break).

There's a little known attribute called wrap for textareas. It's not in the standard though, so your browser compatibility mileage may vary. Go to http://jsfiddle.net/nj3cG/ with chrome and submit the form while watching the network tab in chrome's dev tools. You'll see newlines in what gets sent with the form
http://www.abiglime.com/webmaster/reference/html/tags/textarea.htm
<textarea wrap="off|physical|virtual|hard|soft">
Description
The wrap attribute is used to define how text will wrap in the text box. Possible values:
off disallows word wrapping
physical allows word wrapping and send the text with line breaks in tact when transmitting the data using scripting. Can also be called hard in some browsers
virtual show word wraps in the box but sends the data as one long string of text when transmitting the data with scripts. Can also be called soft in some browsers

Related

Why won't trailing newline character (\n) show empty line in content editable div?

I have a content editable div with pre-wrap style. (I wanted easy text manipulation and didn't want to struggle with <br> for line break while transferring text to and from the div.)
When a string like 1\n2\n3 is given, it shows as expected. However, if there is a \n at the end, an empty line isn't shown. So, when a user presses enter after the last character, although the \n is added to the text, the empty line cue isn't shown (it does show when hitting enter twice though, but I don't want that.)
How to get it to show?
I am using Firefox 42 on Windows 7.
I didn't quite get an answer to this problem (not just on SO but even in my research). However, I found a hack to get around this. Using one of the non breaking spaces characters gives me what I want. I don't intend to pass the data to third party processing, so whatever character I choose can be removed in post processing.

Weird browser behaviour when deleting, what can I do to work around this?

TLDR
Open this up in IE8 http://jsbin.com/ucahor/1/edit#/ucahor/2/edit
Click on a blank line and immediately press Backspace. 2 lines are deleted.
Click on a blank line, wait a second then press Backspace. 1 line is deleted.
Is there anything I can do to work around this?
Full story
I'm trying to make the best possible rich text editor for my web application. I've taken NicEdit and added a bunch of functionality. I'm using nicedit because it was the only editor that satisfied these requirements from the 9 I tested.
Works in IE6
Can paste from Word
Numbering and bullets
Pure Javascript (so we can modify it easily)
Small number of files downloaded
Can set the cursor position
Can be fullscreened
Can handle large files (1500 paragraphs pasted)
One thing I added to my implementation of NicEdit is to have headings inserted for common reports that my users write. A problem with this is that I need a way of having blank lines between the headers. I cannot use <br/> tags because they do not play nicely with inserting lists and I cannot use <div> tags because internet explorer has issues with divs inside a content editable div.
This leaves me with using the <p> tag for indicating new lines.
However I can't just use <p></p>, it is an HTML standard for user agents to ignore empty P tags.
Currently my users are getting by with <p> </p> but this indents every line with a space and new lines do not have the space.
I discovered that there is a Zero Width Space character ​ that will allow my P tags to be rendered and not have a space on each line!
My new <p>​</p> works well except if a user is deleting a line the first backspace appears to do nothing.
So I bound to my keydown event for backspace. It checks the character before the cursor, if it is my Zero Width Space character I blank it out and let the backspace continue as normal.
This works, except if you click the line you wish to delete and quickly click backspace. That action causes 2 lines to be deleted.
You can load up your IE8 and try it out here. http://jsbin.com/ucahor/1/edit#/ucahor/2/edit

Detecting that textarea has started adding string into newline

I have textarea, user keeps writing inside it without pressing enter. If they press enter I get \n char which I need, but sadly they are not pressing enter and instead they just keep typing!
Now, Is there any way I can add new line character inside the string just after the textarea move to next line?
Potential Duplicate : Automatic newline in textarea
Note : The question shared above has an accepted answer. But the link is not working :( The other options aren't very efficient.
I have several technologies to manipulate the String I am getting from <textarea>. So feel free to give solution for any single one.
HTML
JavaScript
Twig
php
CSS
One way to solve this problem is to make the text area auto-resizing. Thus, the user starts with a single line textarea and as soon as the text becomes too long, the textarea adjusts its height to give a new empty line to the user.
Check this question or do some research using your fav. search engine if you need a way to do this.
As soon as the script triggers a height change, you can append a newline before the latest character.
// Update: You might want to check the behavior of a textarea because the text gets most likely wrapped before the latest word. You'll have to write an algo which retrieves the position in the text where you need to insert the LF in order not to break the text. This sounds complicated but shouldn't be too hard. Just check after which chars the text gets wrapped and search for the last appearance of one of these chars.

Can I highlight multiple words in an HTML textarea that fail my regular expression in Javascript?

Basically, here is the deal.
The application I am working on, the database it uses apparently cannot accept non US-ASCII characters in HTML textareas input fields. Now, our users have had issues copying/pasting in text from PDF documents into these fields. Our research found out that certain characters, like the left and right single quotes, apostrophes and double quote characters in the PDF documents, when pasted into the textarea, somehow are transformed into different characters that are not US ASCII and as such, causes problems within our application.
So, I have a regular expression that will flag non US-ASCII (non US keyboard characters). That part of my POC is working, but now, I'd like it so that when users copy/type in text, that any words that get flagged as non-US ASCII be highlighted in the textarea when user tries to save/submit that data.
Is this possible to do? I can use the select(), but that only highlights the last word that gets flagged. Any help on this would be appreciated!
Thanks!
I suggest using an enhanced textarea (the kind which uses iframes) such as tinyMCE and highlighting the offending text with regular HTML.
See other questions such as this one or this one to see how to highlight text in textareas.

Input box precise text selection

I have an input box: input type="text" class="rulerInputText" id="rulerInputBox" readonly
I have Javascript code to detect the selected text and play around with it.
The issue comes when I am allowing the user to actually select text. The text is basic with spaces. When the user begins selecting, there is no issue, but when a space is reached, the user selects it and the next word is automatically selected. Essentially, I want to prevent automatic selection of the entire word. I only want to select exactly what the user wishes to select with the mouse.
Is this possible or do I need to use some sort of crazy Javascript hacks to get this done?
This is a feature of Operating System. The OS provided textbox does auto-selection for better user experience. You do not have any control over here.
(I just confirmed on IE/Windows7)
This is a feature of IE specifically; no other browser has this behaviour. It's a deliberate “smart selection”(*) feature copied from Office, though in newer versions of Office it works less annoyingly, allowing you to revert to character selection if you move the pointer back.
There is as far as I know no way to turn it off in IE, either at the client or server end, because Microsoft think it's such a great feature. Sigh. Even JavaScript hacks don't provide a way round.
About all you could do would be to put invisible spaces between each character, so that IE thought each character was a second word. eg. try selecting:
f​o​o b​a​r b​o​f z​o​t
these have Unicode U+200B ZERO WIDTH SPACE characters between letters. This has side effects though; if the user tries to edit or copy-and-paste the text, they'll get weird invisible characters in the way potentially messing it up.
(*: As usual, “smart” means second-guessing the user, usually getting it wrong, and insisting it's right. aka. “stupid”. Run a mile from anything describing itself as smart.)

Categories