CODEWITHSUNDEEP
javascriptjquerygoogle-chromeselection-api
Matt
Matt

Reputation: 99

selectionStart ignoring new line/line break in textarea in Chrome

I am trying to insert text into a textarea at the cursor position or to replace a selected piece of text. The code works in that the text is inserted and if a selection of text is made it is replaced.

The problem is if the user inserts several line breaks first then tries to insert the text. Then instead of inserting the text at the point of the cursor it inserts it at the second line. So for example if the user inserts line breaks and ends on line 5 then clicks the input to insert the text, the text is inserted at line 2.

var holdFocus;
function updateFocus(x) {
  holdFocus = x;
}

Triggered by:

<textarea onFocus="updateFocus(this)" cols="53" rows="10" name="entry" id="report" style="width: 98%;"></textarea>

Then the insertion of the text: 

function InsertCodeInTextArea(text){
    var tav    = $(holdFocus).val(),
    strPos = $(holdFocus)[0].selectionStart;
    var endPos = $(holdFocus)[0].selectionEnd;
    front  = (tav).substring(0,strPos),
    back   = (tav).substring(endPos,tav.length);
    var textValue = text.split("%lb%").join("\r\n");
    $(holdFocus).val(front+ textValue + back);
}

Triggered by clicking on:

<input class="input" type="button" name="LODCTRRAPPA" value ="LODCTRRAPPA" onClick="InsertCodeInTextArea('Location: %lb%Onset: %lb%Duration: %lb%Course: %lb%Type of pain/symptom: %lb%')"/>

This problem seems to only be occurring in Chrome. Safari and FF are okay. Not tested IE. I am sure that this also wasn't happening until a few weeks ago.

Upvotes: 0

Views: 1512

Answers (1)

Fred Gandt
Fred Gandt

Reputation: 4312

Use vanilla JavaScript

From jQuery docs on val():

Note: At present, using .val() on elements strips carriage return characters from the browser-reported value. When this value is sent to the server via XHR, however, carriage returns are preserved (or added by browsers which do not include them in the raw value). A workaround for this issue can be achieved using a valHook as follows:
$.valHooks.textarea = { get: function( elem ) { return elem.value.replace( /\r?\n/g, "\r\n" ); } };

Something like the following should suffice:

var holdFocus;
function updateFocus(x) {
    holdFocus = x;
}

function InsertCodeInTextArea(text){
    var tav = holdFocus.value;
    holdFocus.value = tav.substring(0, holdFocus.selectionStart) +
                      text.split("%lb%").join("\r\n") +
                      tav.substring(holdFocus.selectionEnd, tav.length);
}
<textarea autofocus onFocus="updateFocus(this)" cols="53" rows="10" name="entry" id="report" style="width: 98%;">foo

bar

baz</textarea>
<input class="input" type="button" name="LODCTRRAPPA" value ="LODCTRRAPPA" onClick="InsertCodeInTextArea('Location: %lb%Onset: %lb%Duration: %lb%Course: %lb%Type of pain/symptom: %lb%')"/>

Update

It's a bug! See productforums.google.com

... if you click out of the textarea and then click back in, and then hit the button the error is now gone and it works.

Tested my snippet, and it did indeed work after clicking out (losing focus) then clicked back in (regaining focus).

This would obviously cause loss of any selections made, and is impractical to ask users to do.

If I find a programmatic workaround, I'll update this answer.

Upvotes: 2

Related Questions