Javascript 如何从文本框中显示网格

我的代码中有一个按钮网格，用户点击“点击这里”这个词，就会显示按钮网格。这使用jquery，我想知道的是，有没有人知道一种方法，用户可以点击文本框，然后出现按钮网格，如果用户点击按钮或远离网格，网格会再次消失。换句话说，我希望它能够准确地工作，Jquery日期选择器如何工作（要查看datepciker Jquery，请单击

要查看JSFIDLE中的代码，请单击尝试以下操作：

已更新

$('#showGrid').click(function(e) {
    if ($('#gridone').css("display") == "table") {
        $('#gridone').hide();
    }
    else {
        $('#gridone').css("display", "table");
    }
    e.stopPropagation();
});

$("body").click(function() {
    $('#gridone').hide();   
});

$('#gridone  input').click(function(){
    $('.box INPUT').val($('.box INPUT').val() + $(this).val() );
    $('#gridone').hide();
});

---

您好，看起来很好。如果我更改“单击此处”，只需一个问题在文本框中，如果我单击一个按钮，按钮的值是否会显示在文本框中，因为在您的示例中，如果我单击一个按钮，它会将“单击此处”替换为该按钮。我将您的代码保留为原始示例中的代码。我已更新了答案，并对您上面提到的功能进行了修改。谢谢，只有一个lat问题（这绝对是最后一个问题），你90%在那里，唯一的问题是如果我点击一个按钮（比如说“P”），它会显示在文本框中，但如果我改变主意，我点击按钮“C”，然后在文本框中显示P和C。那么如何才能做到，如果我单击某个按钮，该按钮的值将替换文本框中以前的值？只需更改这一行：

$（'.box INPUT'）.val（$（this.val（））；

感谢您的出色工作。这很容易被标记为最佳答案