检测代码镜像编辑器的焦点答案

【问题标题】：Detect focus of codemirror editor检测代码镜像编辑器的焦点
【发布时间】：2017-02-15 23:00:29
【问题描述】：

我在我正在创建的 web 应用程序中使用 codemirror，并且我在页面上有几个编辑器。还有撤消和重做按钮，它们确实有效。但是，我只能将一个编辑器设置为撤消，除非我使用 if 语句来确定哪个是焦点，然后将撤消或重做功能应用于其相应的文本框。我尝试了 jQuery 和 JavaScript 的一些变体，但无济于事。这是我试图开始工作的代码块之一。保存 codemirror 设置的实际变量称为“codeeditor1”，“#editor1”是文本框的 id。

if ($("#editor1").is(':focus')) {
  undo.addEventListener('click', function() {
      codeeditor1.undo();
  }, false);
  redo.addEventListener('click', function() {
      codeeditor1.redo();
  }, false);
}

我也根据方法 "cm.hasFocus()" = boolean 的文档尝试了这个。

if (codeeditor1.hasFocus() == true) {
    undo.addEventListener('click', function() {
        codeeditor1.undo();
    }, false);
    redo.addEventListener('click', function() {
        codeeditor1.redo();
    }, false);
}

为了逻辑代码放置，我现在也尝试了这个，但仍然没有运气。可能是codemirror方法的bug？

undo.addEventListener('click', function() {
    if (codeeditor1.hasFocus() == true) {
        codeeditor1.undo();
    }
}, false);

redo.addEventListener('click', function() {
    if (codeeditor1.hasFocus() == true) {
        codeeditor1.redo();
    }
}, false);

【问题讨论】：

标签： javascript jquery html css codemirror

【解决方案1】：

尝试

  if( editor.hasFocus() == true  ) 
      // This editor is Codemirror object 
      // not jquery element.
  }

【讨论】：

感谢您的回答，我已经尝试过了，但它似乎仍然没有注册。我浏览了文档，它指出有一个“cm.hasFocus()”方法，但我似乎无法正确处理。

【解决方案2】：

好的！所以，我想通了。

问题是（我没有正确思考）当用户按下按钮时焦点当然会被移除，然后它会尝试对其进行测试，这意味着“hasFocus”的结果当然是错误的。所以为了解决这个问题，我创建了一个变量。当任何一个编辑器聚焦到 1、2 或 3 时，变量就会更新。然后我单击按钮检查变量的值是什么，然后在运行任一撤消之前将焦点重新应用到相应的编辑器或重做现在焦点编辑器。

var detectfocus = "0";

codeeditor1.on('focus', function() {
    detectfocus = "1";
});
codeeditor2.on('focus', function() {
    detectfocus = "2";
});
codeeditor3.on('focus', function() {
    detectfocus = "3";
});


undo.addEventListener('click', function() {
    if (detectfocus === "1") {
        codeeditor1.focus();
        codeeditor1.undo();
    } else if (detectfocus === "2") {
        codeeditor2.focus();
        codeeditor2.undo();
    } else if (detectfocus === "3") {
        codeeditor3.focus();
        codeeditor3.undo();
    }
}, false);

redo.addEventListener('click', function() {
    if (detectfocus === "1") {
        codeeditor1.focus();
        codeeditor1.redo();
    } else if (detectfocus === "2") {
        codeeditor2.focus();
        codeeditor2.redo();
    } else if (detectfocus === "3") {
        codeeditor3.focus();
        codeeditor3.redo();
    }
}, false);

【讨论】：