javascript - 双击可编辑

Question

我有一个带有一些文本的 p 标签，我试图让它成为 contenteditable 但仅限于双击。我怎样才能防止浏览器在我点击它时将光标放在 p 上并且只在我双击时才这样做？查询:

    p.dblclick(function(e){
        p.css("cursor", "text");
    })
    .focusout(function(){
        p.css("cursor", "default");
    })
    .click(function(e){
        console.log('focus p');
        e.stopPropagation();
        $("body").focus(); // not stopping Chrome from placing cursor
    });

我可以让 contenteditable 默认为假，然后在 dbleclick 上让它为真，然后执行 p.focus() 但这意味着我无法将光标放在我单击的位置。另一方面，我可以在第一次点击后将其设置为 contenteditable，然后等待 1.5 秒等待双击，如果没有发生，则取消它，但如果发生，那么内容将是可编辑的，第二次点击将触发将光标放置在正确的位置。然而，它并没有那么顺利，并且让内容在这 1 秒半内可编辑。

有什么想法吗？

回答: 如果有人感兴趣，我继续实现计时器方法，因为我认为没有其他方法......这是代码

var DELAY = 700, clicks = 0, timer = null;
p.focusout(function(){
    p.css("cursor", "default");
    p.prop("contenteditable", false);
})
.click(function(e){
    clicks++;
    p.prop("contenteditable", true);
    if(clicks == 1){
        timer = setTimeout(function() {
            p.prop("contenteditable", false);
            //alert("Single Click");  //perform single-click action
            clicks = 0;             //after action performed, reset counter
        }, DELAY);
    } else {
        clearTimeout(timer);    //prevent single-click action
       // alert("Double Click");  //perform double-click action
        clicks = 0;             //after action performed, reset counter
    }

});

Answer 1

在这里尝试这个工作 fiddle

 <p ondblclick="this.contentEditable=true;this.className='inEdit';" onblur="this.contentEditable=false;this.className='';" contenteditable="false" class="">This paragraph uses some simple script to be editable. Double-click the text to begin editing.</p>