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

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

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软件包。他们两个都已经运行了这个检查并且有一个后备。

Answer 2

以下演示将文本从底部的<textarea>插入顶部的contenteditable <fieldset>。 .execCommand()需要在事件处理程序/回调函数中，并使用[contenteditable]属性编辑元素 - 可以是除了表单控件（如<textarea>或<input>）之外的任何标记。该演示在.execCommand()事件代表团中有mouseup。

---

演示

说明

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

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

<fieldset class="editor" contenteditable='true'></fieldset>
<textarea class='insert'style='min-width:98%'></textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>