使用vanilla JavaScript

Question

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

问题是如果用户首先插入多个换行符然后尝试插入文本。然后，不是在光标处插入文本，而是将其插入第二行。因此，例如，如果用户在第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

使用vanilla JavaScript

来自jQuery docs on val()：

注意：目前，在元素上使用.val（）会从浏览器报告的值中删除回车符。但是，当通过XHR将此值发送到服务器时，将保留回车符（或由不包含原始值的浏览器添加回车符）。可以使用valHook实现此问题的解决方法，如下所示：
$.valHooks.textarea = { get: function( elem ) { return elem.value.replace( /\r?\n/g, "\r\n" ); } };

以下内容应该足够了：

＆＃13;

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

＆＃13;

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

＆＃13;

更新

这是一个错误！见productforums.google.com

...如果您单击textarea然后再单击，然后点击按钮，错误现在消失了，它就可以了。

经过测试我的片段，点击后失去了焦点（失去焦点）然后再次点击（重新获得焦点）确实有效。

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

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

selectionStart忽略Chrome中textarea中的新行/换行符

1 个答案:

使用vanilla JavaScript

更新