Question

我有一个可编辑的div：

<div id="editor" contentEditable="true"> Enter your text here.. </div>

我希望当我在Dropdown组件中选择一些元素来更改可编辑div中所选文本的字体时，但每次单击该Dropdown组件中的某个项目时，我都会将焦点放在可编辑的div上。

我已经搜索过这个问题，但我找不到任何可以理解的内容。

在这篇文章中：dont-lose-focus-when-clicking-another-element，我发现了这段代码：

protect: function (e) {
        e.preventDefault()
        return setTimeout(300)
    }

但我不知道如何将其添加到我的代码中。

如果有人可以帮我解决这个问题，我会很感激。

Answer 1

基本上你只需要

使用您拥有的小保护功能暂停mousedown事件

但仍处理您的点击事件。

heres the example, focus on the input first than you click hi

var protect = function (e) {
    e.preventDefault()
    return setTimeout(300)
}

var handleClick = function(){
    alert('hi')
}

 $('div')
    .on('mousedown', protect)
    .on('click', handleClick) 
 })

假设您正在使用jquery http://jsfiddle.net/yF6Gg/

丢失焦点ContentEditable DIV？

1 个答案: