javascript - 选择开始忽略 Chrome 中文本区域中的新行/换行符

Question

我正在尝试将文本插入光标位置的文本区域或替换选定的文本片段。该代码的工作原理是插入文本，如果选择了文本，则将替换它。

问题是，如果用户先插入几个换行符，然后尝试插入文本。然后，不是在光标处插入文本，而是将其插入到第二行。例如，如果用户插入换行符并在第 5 行结束，然后单击输入来插入文本，则文本将插入到第 2 行。

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

触发者:

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

然后插入文本:

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);
}

通过点击触发:

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

此问题似乎仅发生在 Chrome 中。 Safari 和 FF 都可以。未测试 IE。我确信这也是几周前才发生的。

Answer 1

使用普通 JavaScript

来自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" ); } };

像下面这样的东西就足够了:

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%')"/>

更新

这是一个错误!请参阅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.

测试了我的代码片段，在单击退出(失去焦点)然后单击返回(重新获得焦点)后，它确实起作用了。

这显然会导致所做的任何选择丢失，并且要求用户这样做是不切实际的。

如果我找到编程解决方法，我会更新此答案。