在doubleclick上满足 [英] contenteditable on doubleclick

问题描述

我有一个带有一些文字的 p 标签，而我正试图让它 contenteditable 但是只在双击。当我点击它时，如何防止浏览器将光标放在p上，只有在我双击时才这样做？ JQuery：

I've got a p tag with some text, and I'm trying to make it contenteditable but only on doubleclick. How can I prevent browser from placing the cursor on the p when I click on it and only do it when I doubleclick? JQuery:

    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 设为false然后在 dbleclick 上将其设为true，然后执行 p.focus（）但这意味着我无法将光标放在哪里我点击了。另一方面，我可以在第一次点击后让它满足，然后等待1.5s for dobuleclick，如果没有发生取消它，但如果它发生了，那么内容将是可编辑的，第二次点击将触发将光标放在正确的位置。然而，它不是那么平滑，并且使这些内容可以在这些1秒半内编辑。

I could make contenteditable false by default and then make it true on dbleclick and then do p.focus() but it means I can't place cursor where I clicked. On the other hand, I could make it contenteditable after first click and then wait like 1.5s for a dobuleclick and if it didn't happen cancel it, but if it happened, then the content would be editable and the second click would trigger the placement of the cursor in the right place. However, it's not that smooth and makes the content editable for these 1 and a half seconds.

回答：
如果有人有兴趣，我继续实施计时器方法，因为我不认为有任何其他方式...这里是代码

answer: In case somebody is interested, I went on to implement the timer method, because I don't think there's any other way... here's the code

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
    }

});

推荐答案

在这里试一下小提琴

 <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>

这篇关于在doubleclick上满足的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！