Question

我正在处理一个项目，当用户在某种形式的HTML / javascript输入中输入内容时，需要自动生成文本。现在，输入正在实现为一个可信的HTML元素。我处理这个问题的方法是使用keyDown来确定要添加的内容，并使用execcommand在为键事件添加文本之前设置正确的格式。这适用于Chrome，Firefox和Safari。但我在IE中遇到了一个相当奇怪的问题。在选择上使用execcommand或在光标位于可编辑内容的结尾或开头时切换其值可以完美地工作。问题是当没有选择任何内容且光标不在文本的结尾或开头时，execcommand会影响所有可信内容，而不仅仅是当前事件添加的文本。

以下是一个快速编码的示例，可以非常清楚地显示问题：

<!DOCTYPE html>
<html>
  <head>
    <script>
      function styleActive(style) {
        var isActive = false;
        if(style) {
          isActive = document.queryCommandState(style);
    }
        return isActive;
      }
      function setStyle(style, desiredState) {
        if(style) {
          if(styleActive(style) != desiredState) {
            document.execCommand(style, false, null);
          }
        }
      }
      function autoFormat(e) {
        var keynum;
        var keychar;
        var numcheck;
        if(e.which) {
          keynum = e.which;
        }
        keychar = String.fromCharCode(keynum);
        numcheck = /\d/;
        if(numcheck.test(keychar)) {
          setStyle("subscript", true);
        } else {
          setStyle("subscript", false);
        }
      }
    </script>
    <style type="text/css">
      p._editable, p._editable p {margin:0px;}
      p._editable {margin-left:6px; margin-right:6px; margin-top:3px; margin-bottom:3px;}
    </style>
  </head>
  <body>
    <button type="button" onclick='document.getElementById("editable").focus(); document.execCommand("subscript", false, null);'>Sub</button>

    <button type="button" onclick='document.getElementById("editable").focus(); document.execCommand("superscript", false, null);'>Sup</button>
    <div>
      <div style="display:inline-block;min-width:30px;border-style:solid; border-width:5px;">
        <p id="editable" class="_editable" contenteditable="true" onkeydown="autoFormat(event);"></p>
      </div>
    </div>
    <script>document.getElementById("editable").focus();</script>
  </body>
</html>

基本上它只是两个div中的一个p元素，随着它的扩展而扩展，并且格式状态根据p元素的keyDown事件而改变。如果密钥是数字，它所做的只是确保下标是活动的，否则它确保它不活动。重现问题的最简单方法是键入一些数字，然后使用箭头键将光标移回它们。我所看到的是，在初始移动之后，所有下标数字现在变得正常，因为因为箭头键不是数字键而正在调用下标的execcommand。导致它发生的另一种方法是在没有选择任何内容的文本中间点击sub或sup按钮。

理想情况下，最好的方法是了解可能发生的事情以及切换格式的方法，选择的内容不会影响所有内容，以便我可以继续使用这种处理方式。如果这是不可能的，将非常感谢任何处理此方法的建议。期望的最终结果是javascript / HTML中的文本输入，当有人点击时我将弹出，然后当他们输入时我可以确定文本的内容以及将要添加的内容并相应地格式化输出，将光标位置保持为文本输入通常会。我只担心新的浏览器，所以IE9和支持HTML5的主要浏览器的新版本。

目前我能想到的最好的想法是在keyDown中吞下键输入，以查看我遇到问题并尝试通过DOM操作插入字符的情况。

如何在IE中的execcommand时避免格式化所有文本

0 个答案: