在插入符号处插入而不是替换整个文本区域答案

【问题标题】：insert at caret instead of replace entire textarea在插入符号处插入而不是替换整个文本区域
【发布时间】：2019-12-20 12:14:10
【问题描述】：

我正在修改第三方应用程序，在该应用程序中，我有以下代码：

            <?php if (!$this->allowEditor) { ?>
            $('#ticket_message').val(data.text);
            <?php } else { ?>
            jInsertEditorText(data.text, 'ticket_message');
            <?php } ?>

在我需要修改的页面上，它正在运行if 语句。它目前所做的是替换 textarea #ticket_message 的内容，但还有一种方法可以将其插入 textarea 而不覆盖现有内容。

如果将它插入到用户在插入符号处停止输入的最后一个位置会更好。

例如 > TEXTAREA：

Lorem ipsum dolar sit met.

INSERT IT HERE BECAUSE THIS IS THE LAST PLACE THE TEXT CURSOR(caret) WAS SET

Lorem ipsum dolar sit met.

【问题讨论】：

也许看看api.jquery.com/append

标签： php replace insert textarea caret

【解决方案1】：

你可以附加值

$('#ticket_message').append(new_val);

要在插入符号处插入，您可以使用以下函数

function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
    "ff" : (document.selection ? "ie" : false ) );
if (br == "ie") { 
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart ('character', -txtarea.value.length);
    strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;

var front = (txtarea.value).substring(0,strPos);  
var back = (txtarea.value).substring(strPos,txtarea.value.length); 
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") { 
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart ('character', -txtarea.value.length);
    range.moveStart ('character', strPos);
    range.moveEnd ('character', 0);
    range.select();
}
else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}

【讨论】：

没有解决问题。它只给出了一个方向。如果您的答案已经完全解决，它仍然只是附加而不是插入插入符号。因此 +1 但不是已解决的答案。
好吧好吧。你可以在这里查看你需要什么stackoverflow.com/questions/1064089/…
非常感谢，这真的很有帮助。我想知道你输入了什么来得到这个答案。因为发帖之前没有找到。这是一个很好的解决方案，再次感谢！

【解决方案2】：

虽然 Amit Sharma 在我的案例中为我提供了非常有用的信息，但我确实需要另辟蹊径。因此，根据您的需要，这些答案之一应该会让您更接近您的结果。

<?php if (!$this->allowEditor) { ?>
  var $txt = $("#ticket_message");
  var caretPos = $txt[0].selectionStart;
  var textAreaTxt = $txt.val();
  var txtToAdd = data.text;
  $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
<?php } else { ?>
  jInsertEditorText(data.text, 'ticket_message');
<?php } ?>

这段代码改编自这里：https://www.codehaven.co.uk/jquery/jquery-strings/insert-text-at-cursor-position-jquery/

【讨论】：