javascript - 单击时编辑 HTML 文本

Question

我想通过单击将文本更改为输入文本:目前我已经:

<div class="wrapper">
    <span class="text-content">Double Click On Me!</span>
</div>

在 JavaScript 中:

//plugin to make any element text editable
$.fn.extend({
    editable: function () {
        $(this).each(function () {
            var $el = $(this),
            $edittextbox = $('<input type="text"></input>').css('min-width', $el.width()),
            submitChanges = function () {
                if ($edittextbox.val() !== '') {
                    $el.html($edittextbox.val());
                    $el.show();
                    $el.trigger('editsubmit', [$el.html()]);
                    $(document).unbind('click', submitChanges);
                    $edittextbox.detach();
                }
            },
            tempVal;
            $edittextbox.click(function (event) {
                event.stopPropagation();
            });

            $el.dblclick(function (e) {
                tempVal = $el.html();
                $edittextbox.val(tempVal).insertBefore(this)
                .bind('keypress', function (e) {
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 13) {
                        submitChanges();
                    }
                }).select();
                $el.hide();
                $(document).click(submitChanges);
            });
        });
        return this;
    }
});

//implement plugin
$('.text-content').editable().on('editsubmit', function (event, val) {
    console.log('text changed to ' + val);
});

但我不知道如何将双击更改为简单单击!我尝试用 $el.click() 替换 $el.dblclick(...)，但它不起作用。有人有解决办法吗？

Answer 1

当您将 $el.dblclick 更改为 $el.click 时，它也会用 $(document).click(submitChanges); 处理事件。因此，$el.click 处理程序应返回 false 以停止进一步的事件处理。

$el.click(function (e) { // <---------- click
  tempVal = $el.html();
  $edittextbox.val(tempVal).insertBefore(this).bind('keypress', function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) {
      submitChanges();
    }
  }).select();
  $el.hide();
  $(document).click(submitChanges);
  return false; // <------------------------ stop further event handling
});

http://jsfiddle.net/zvm8a7cr/