Question

到目前为止，我发现的唯一方法是document.queryCommandSupported('insertText')，尽管它似乎不正确，例如，这段代码在firefox中不起作用，但是上面的命令返回了true

txt = "aaaaaaaaaaaa";
  
$(document).ready(function() {
        console.log( document.queryCommandSupported('insertText') );
        $("#myinp").focus();
        document.execCommand("insertText", false, txt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea  id="myinp" ></textarea>

那么，正确的方法是什么？

Answer 1

以下演示将从底部的<textarea>到顶部的contenteditable <fieldset>插入文本。 .execCommand()必须在事件处理程序/回调函数中，并且它需要编辑带有[contenteditable]属性的元素-可以是除表单控件（例如<textarea>或{{1}）之外的任何标签}。该演示在<input>事件委托中包含.execCommand()。

演示

说明

在底部的mouseup中键入一些文本。
单击任意位置或选择<textarea>中的任何文本。
<fieldset>中的文本将被插入到光标所在的位置或<textarea>中

<fieldset>

$('.editor').on('mouseup', function() {
  var txt = $('.insert').val();
  document.execCommand("insertText", false, txt);
});

Answer 2

document.execCommand("insertText", false, txt)返回true / false，因此您可以使用：

if (document.execCommand("insertText", false, txt)) {
  // it worked
} else {
  // it didn't work
}

如果您正在寻找一种跨浏览器的方式来插入文本，请尝试insert-text-textarea。如果需要IE8 +支持，请尝试使用insert-text-at-cursor软件包。他们两个都已经运行了此检查并具有后备功能。

检查浏览器是否支持document.execCommand insertText

2 个答案:

演示