Как я могу сделать крошечную форму JavaScript похожей на диалог в выбранном мной месте?

Question

У меня есть HTML5 Canvas.Когда пользователь дважды щелкает в определенной области этого холста, я хочу, чтобы в этом месте появилась форма с одним полем, чтобы пользователь мог редактировать некоторый текст.

Мой предполагаемый эффект похож на этот снимок экранаиз Google Документов.Я дважды щелкнул по фигуре с текстом «Hello», и появилось редактируемое текстовое поле.

Я разработал способ определения двойного щелчка, местоположения мыши и текста.Но до сих пор я использую диалог «подсказки (...)» на языке JavaScript для редактирования текста, а это не то, что мне нужно.

Я думаю, что яищу что-то, что можно добавить в эту функцию для замены приглашения:

// let the user edit the text, by showing a popup-field that appears at (x, y)
function editText(x, y, text) {
    return prompt('Text:', text);
}

Если это уместно, я немного использую jQuery.

Answer 1

Apprise, похоже, не выполнил все, о чем вы просили, поэтому я написал это: http://jsfiddle.net/Qj9QR/12/

CSS

.prompt { position: absolute; background-color: #E0ECFF; border-radius: 3px; width: 200px; height: 50px; border: 1px solid #99C0FF }
.prompt textarea { margin: 4px 0 0 4px  }
.prompt .hint { position: absolute; bottom: 1px; left: 5px; font-size: 9px; color: #444466 }

JS использует jQuery см. Скрипку

function prompt(opts){
    this.opts = $.extend({}, this.defaults, opts);
    this.init();
    this.open();
}

prompt.prototype = {
    defaults: { x: 0, y: 0, text: 'Type Here' },
    init: function(){
        this.create();
        this.bind();
        this.position();
    },
    bind: function(){
        var self = this;
        this.el.click(false).find('textarea').bind('keypress', function(e){
            if(e.which === 13) self.close(e);
        });
        $(document).bind('click.prompt', $.proxy(self.close, self));
    },
    close: function(e){
        if(this.opts.close){
            this.opts.close.apply(this, arguments);
        }
        if(!e.isPropagationStopped()){
            $(document).unbind('click', this.close);
            this.el.remove();
        }
    },
    create: function(){
        this.el = $('<div class="prompt" />')
            .append('<textarea></textarea>')
                .find('textarea').val(this.opts.text)
                .end()
            .append('<span class="hint">Hint: use Shift-Enter for multiple lines</span>');
    },
    position: function(){
        this.el.css({top: this.opts.y, left: this.opts.x });
    },
    open: function(){
        this.el.appendTo('body');
        this.el.show('fast')
            .find('textarea').focus().select();  
    } 
};
// IN USE: when you click an LI update some html
$('li').click(function(){
    var li = $(this),
        pos = li.position();
    new prompt({
        text: li.html(), 
        x: pos.left, 
        y: pos.top + 17, 
        close: function(e){
            var newText = $(e.target).val();
            newText && li.html(newText);
        } 
    });
    return false;
});

---

Обновлено с позицией и обновлением значений элемента