jquery鼠标双击文本文字快速编辑插件

使用方法

(function ($) {
    $.fn.editableOnDoubleClick = function (options) {
        const settings = $.extend({
            onSave: function (newValue) {},
            onCancel: function () {}
        }, options);

        return this.each(function () {
            let $this = $(this);
            let oldValue;

            $this.dblclick(function () {
                oldValue = $this.text();
                $this.addClass('editing').attr('contenteditable', true).focus();
            });

            $this.on('keydown', function (event) {
                if (event.shiftKey && event.keyCode === 13) { // Shift+Enter keys
					event.preventDefault();
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let br = document.createElement("br");
                    range.deleteContents();
                    range.insertNode(br);
                    range.setStartAfter(br);
                    range.setEndAfter(br);
                    selection.removeAllRanges();
                    selection.addRange(range);
                } else if (event.keyCode === 13) { // Enter key
                    event.preventDefault();
                    exitEditing();
                } else if (event.keyCode === 27) { // Escape key
                    $this.text(oldValue);
                    exitEditing();
                }
            });

            // Save and exit editing mode when focus leaves the element
            $this.on('blur', function() {
                exitEditing();
            });

            function exitEditing() {
                $this.removeClass('editing').removeAttr('contenteditable');
                let newValue = $this.text().trim(); // Trim whitespace
                if (newValue !== oldValue) {
                    settings.onSave(newValue);
                } else {
                    settings.onCancel();
                }
            }
        });
    };
}(jQuery));