Question

我有一个表格单元格，

<td>
    <div style="position:relative">
      <div class="editable" contenteditable="true">
         <br>
      </div>
    </div>
</td>

我在可编辑的div上注册焦点事件，

$(".editable").on("focus", function() {
       alert("focus event is called");
   });

但这不起作用。请提前帮助和感谢。

Answer 1

尝试

$(document).on("focus",".editable", function() {
       alert("focus event is called");
   });

FIDDLE

Answer 2

要focus处理div，它必须有tabindex。

所以为了你的例子，

<div class="editable" contenteditable="true" tabindex='1'>

Answer 3

<div style="position:relative">
    <div contenteditable="true" style="width:100px;height:100px;" class="editable">
    </div>
</div>
apply some css

Answer 4

@OP - 您的原始代码工作正常 - 也许您收到了很多警报（点击警报OK按钮模糊并重新关注div）然后接受浏览器的建议以关闭警报？

尝试以不同的方式检查是否检测到事件：

HTML：

<div style="position:relative">
  <div class="editable" style="border : 1px solid black" contenteditable="true">
     <br>
  </div>
</div>

            <textarea id="area"></textarea>

JS：

$(".editable").on("focus", function() {
   $("#area").html("focused");
});

$(".editable").on("blur", function() {
   $("#area").html("blurred");
});

在此处试试：http://jsfiddle.net/cuYBD/

点击进入和退出div，你应该看到你正在寻找的结果。

焦点事件不起作用？

4 个答案: