用焦点替换输入的焦点范围

Question

该问题提供了有关背景和动机的更多详细信息。 请注意，我使用的是Linux，并且只关心最近的Firefox（至少38）和Chrome。

基本上，我想通过Web界面交互式地编辑一些AST。

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

我不再使用contenteditable了，请看此，因为看起来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生成的，所以我看不到控制台错误（请参阅此问题）。

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

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

Answer 1

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

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

因此，您可以更改为：

$myspan.keypress(function (ev) {

更新了小提琴。

只关心最近的Firefox（至少38个）和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 个解决方案

解决方案1
3 2015-11-30 13:14:28

更新了小提琴。

解决方案2
1 2015-11-30 13:10:45

用焦点替换输入的焦点范围

问题描述

附加物

2 个解决方案

解决方案1 3 2015-11-30 13:14:28

更新了小提琴。

解决方案2 1 2015-11-30 13:10:45

解决方案1
3 2015-11-30 13:14:28

解决方案2
1 2015-11-30 13:10:45