如何使一个小小的JavaScript表单在我选择的某个位置出现在对话框中？

我有一个HTML5画布。当用户双击画布的某个特定区域时，我希望在该位置显示一个字段表单，以便用户可以编辑一些文本

我的预期效果类似于谷歌文档的截图。我双击带有“Hello”文本的形状，出现了可编辑文本字段

我已经研究出如何检测双击、鼠标位置和文本。但到目前为止，我使用javascript“prompt（…）”对话框来编辑文本，这不是我想要的

我想我想在这个函数中加入一些东西来代替提示符：

// 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一点。

Apprise似乎并没有做您要求的所有事情，所以我写了以下内容：

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

功能提示（opts）{
this.opts=$.extend（{}，this.defaults，opts）；
this.init（）；
这个.open（）；
}
prompt.prototype={
默认值：{x:0，y:0，文本：'Type Here'}，
init:function（）{
这个。create（）；
这个。bind（）；
这个位置（）；
},
绑定：函数（）{
var self=这个；
this.el.click（false）.find（'textarea'）.bind（'keypress'，函数（e）{
如果（e.which==13）自关闭（e）；
});
$（document.bind（'click.prompt'，$.proxy（self.close，self））；
},
关闭：功能（e）{
if（this.opts.close）{
this.opts.close.apply（this，arguments）；
}
如果（！e.isPropagationStopped（））{
$（文档）.unbind（'click'，this.close）；
这个.el.remove（）；
}
},
创建：函数（）{
this.el=$（''）
.append（“”）
.find（'textarea'）.val（this.opts.text）
(完)
.append（'提示：对多行使用Shift-Enter'）；
},
职位：职能（）{
css（{top:this.opts.y，left:this.opts.x}）；
},
打开：函数（）{
本附录（“正文”）；
this.el.show（'fast'））
.find（'textarea'）.focus（）.select（）；
} 
};
//正在使用：当您单击某个LI时，请更新一些html
$（'li'）。单击（函数（）{
var li=$（此），
pos=li.position（）；
新提示({
text:li.html（），
x:位置左，
y:位置顶部+17，
关闭：功能（e）{
var newText=$（e.target）.val（）；
newText&&li.html（newText）；
} 
});
返回false；
});

---

---

你可以试试，或者这个=>+1作为提示-似乎值得回答@Josiah Ruddel？Josiah，太好了，这正是我想要的。一个问题：我如何获得已编辑的文本，或者可能获得已编辑文本的通知？

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;
});