檢查瀏覽器是否支持 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>