检查浏览器是否支持 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
}

如果您正在寻找一种跨浏览器的方式来插入文本，请尝试text-field-edit 。 如果您需要 IE8+ 支持，请尝试insert-text-at-cursor包。 他们都已经运行了这个检查并且有一个后备。

Answer 2

下面的演示会将底部的<textarea>中的文本插入到顶部的contenteditable <fieldset>中。 .execCommand()需要在事件处理程序/回调函数中，并且它编辑具有[contenteditable]属性的元素——它可以是除了表单控件之外的任何标记，例如<textarea>或<input> 。 该演示在mouseup事件委托中有.execCommand() 。

---

演示

指示

• 在底部的<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>