Question

这个question提供了有关背景和动机的更多细节。请注意，我在Linux上只关心关于最近的Firefox（至少38）＆amp;铬。

基本上，我想用Web界面以交互方式编辑一些AST。

在github提交7b869102332bd29309上的MELT监视器中，我希望有一个可聚焦的<span>（tabindex='0'因此可以获得焦点）当我按下时空格键被一些已经焦点的<input type='text'/>所取代......

我不再使用contenteditable，请参阅this，因为它看起来contenteditable 真的凌乱（并且不能正常工作）如我所愿）！

我制作了一个jsfiddle，其中包含一个简单的示例：

<div id='mydiv_id'>
   *before* <span id='myspan_id' tabindex='0'>in span</span> !after!
</div>

和JQuery 2代码：

var $mydiv = null;
var $myspan = null;
$(document).ready(function() {
  $myspan = $('#myspan_id');
  $mydiv = $('#mydiv_id');
  console.log (" mydiv=", $mydiv, " myspan=", $myspan);
  $myspan.on("keypress", function (ev) {
     console.log ("myspan keypress ev=", ev);
     if (ev.keyCode === 32 || ev.key === ' ') {
        console.log ("myspan got space ev=", ev);
        var myinput = 
           $("<input type='text' id='myinput_id' width='16' class='myinp_cl'/>");
        $myspan.replaceWith(myinput);
        myinput.focus();
        console.log ("myspan replaced with myinput=", myinput);
      }
   });
  console.log (" mydiv=", $mydiv, " myspan=", $myspan);
});

但它没有按预期工作。

或者，焦点<span>元素可能无法替换（在空间键盘上）并且具有焦点<input>元素？

^{（在MELT监视器中，我使用内置的jquery 2.1.4）}

附加物

更新的jsfiddle工作（对不起我的错误，它需要jquery 2.1.4，它正在工作 - 我很遗憾在这里提出了问题），并且由于MELT监视器的Javascript是AJAX生成的，我是没有看到控制台中的每个错误（请参阅this问题）。

注意：在提交df3bdf3984bc202f中，我现在有一个案例，在以编程方式将焦点移动到新创建的<input>后，$(':focus')是一个空对象，document.activeElement是<body>本身......

^{我现在tempted删除这个问题，它可能没用......}

Answer 1

当我看到你的小提琴时，我注意到了：

您正在使用.on()方法。
.on()不是在jQuery 1.6.x版中引入的，而是1.7 +。

所以你可以改为：

$myspan.keypress(function (ev) {

Updated fiddle.

只关心最近的Firefox（至少38个）＆amp; Chrome。

因此，最好将jQuery版本升级到最新版本并使用版本2.x树。

Answer 2

你可以在这样的范围内绑定focus事件：

var $mydiv = null;
var $myspan = null;
$(document).ready(function() {
  $myspan = $('#myspan_id');
  $mydiv = $('#mydiv_id');
    $myspan.on('focus', function() { var myinput = 
           $("<input type='text' id='myinput_id' width='16' class='myinp_cl'/>");
        $myspan.replaceWith(myinput);
        myinput.focus();
    });
});

演示： http://jsfiddle.net/wLf0e3cs/

通过焦点

附加物

2 个答案:

Updated fiddle.