3

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

这是一个快速编码的示例，它相当清楚地显示了这个问题：

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

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

目前我能想出的最好的主意是在我看到问题并尝试通过 DOM 操作插入字符的情况下在 keyDown 处吞下键输入。

4

0 回答 0