有什么想法吗？

Question

我有一个带有一些文字的p标签，而我正试图将其设为contenteditable，但仅限于双击。当我点击它时，如何防止浏览器将光标放在p上，只有在我双击时才这样做？ 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秒半内编辑。

有什么想法吗？

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

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>

Answer 2

这是一个适合我的解决方案：

<script>
function listenForDoubleClick(element) {
  element.contentEditable = true;
  setTimeout(function() {
    if (document.activeElement !== element) {
      element.contentEditable = false;
    }
  }, 300);
}
</script>

<p onclick="listenForDoubleClick(this);" onblur="this.contentEditable=false;">Double-click the text to begin editing.</p>

这是一个工作小提琴：https://jsfiddle.net/dtL3xzfb/

它使用超时事件检查文本是否在特定时间段（300毫秒）内被选中，如果未选择文本（通过第二次点击），它将再次将内容编辑为false：内容可编辑第一次单击后参数设置为true，因此当您再次单击时将选择文本。

Answer 3

您可以像How to disable text selection using jQuery?中那样使文字无法选择：

var p = $('p');

p.attr('unselectable', 'on')
    .css('user-select', 'none')
    .on('selectstart', false);

p.dblclick(function (e) {
    p.css("cursor", "text")
        .attr('contenteditable', true)
        .attr('unselectable', 'off')
        .css('user-select', 'inherit')
        .off('selectstart', false)
        .focus();

});

p.focusout(function () {
    p.css("cursor", "default")
        .attr('unselectable', 'on')
        .attr('contenteditable', false)
        .css('user-select', 'none')
        .on('selectstart', false);
});

在doubleclick上满足

有什么想法吗？

3 个答案: