selectionStart在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中。狩猎旅行和FF都没问题。没有测试IE。我相信这也是几个星期前才发生的。

Answer 1

使用香草JavaScript

来自val()

注意:目前，在元素上使用.val()会从浏览器报告的值中剥离回车字符。但是，当这个值通过XHR发送到服务器时，回车将被保留(或者由不包含它们的浏览器添加到原始值中)。可以使用valHook解决此问题，如下所示： $.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

..。如果您单击textarea，然后单击back in，然后按下按钮，错误就消失了，并且它可以工作了。

测试了我的片段，它确实在点击(失去焦点)之后工作，然后点击回来(重新获得焦点)。

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

如果我找到了一个编程解决方案，我将更新这个答案。