Javascript 创建输入字段，如谷歌联系人

在GMail中，您可以添加和修改联系人详细信息

但是你能做到这一点的方法非常巧妙

每个字段都有一些事件，如：

• 输入某些文本时自动调整文本框的大小
• 悬停时，将标签更改为输入字段
• onleave，将输入字段再次更改为标签
• 自动保存内容

var-controlfocused=false；
$（document）.on（“鼠标悬停”，“label.Editable”，函数（）{
var txt=$（this.text（）；
$（此）。替换为（“”）；
$（“#hooverfield”）.val（txt.autosizeInput（）；
});
$（文档）。在（“单击”，“输入.hooverfield”，函数（）{
controlfocused=true；
var txt=$（this.val（）；
$（此）。替换为（“”）；
$（“#Editfield”）.val（txt）.autosizeInput（）；
});
$（document）.on（“mouseleave”，“input.hooverfield”，函数（）{
如果（！controlfocused）{
var txt=$（this.val（）；
$（this.replace为（“+txt+”）；
}
});
$（document）.on（“blur”，“input.Editfield”，函数（）{
控制聚焦=假；
var txt=$（this.val（）；
$（this.replace为（“+txt+”）；
});

我创建了一个小示例，但还没有准备好

有没有人对此有经验？谷歌是如何做到这一点的

这里还有一些工作要做

• 验证，悬停并离开时反弹文本

---

我可以使用任何好的库来获得与Google input behavior相同的结果吗？

使用

contenteditable

属性创建了一种更简单的方法。目前，它在视觉上与谷歌的输入并不相似，但这方面没有障碍。在功能上，它的工作原理与您期望的一样：以最小宽度自动调整大小，可编辑，但在未悬停时似乎不是这样，在离开时处理“保存”

$（“.google”）.blur（函数（evt）{
//在此处插入真正的保存逻辑。
log（“保存东西！”）；
});
*{
框大小：边框框；
}
.谷歌{
显示：内联块；
高度：25px；
线高：25px；
宽度：自动；
边界：无；
最小宽度：80px；
字体系列：无衬线；
}
.google:hover、.google:focus、.google:active{
边框：1px纯色灰色；
}

您好
您找到您伟大问题的答案了吗？
var controlfocused = false;

$(document).on("mouseover", "label.Editable", function () {
    var txt = $(this).text();
    $(this).replaceWith("<input id='hooverfield' class='hooverfield' data-autosize-input='{ 'space': 40 }'/>");
    $("#hooverfield").val(txt).autosizeInput();
});

$(document).on("click", "input.hooverfield", function () {
    controlfocused = true;
    var txt = $(this).val();
    $(this).replaceWith("<input id='Editfield' class='Editfield' type='text' data-autosize-input='{ 'space': 40 }'/>");
    $("#Editfield").val(txt).autosizeInput();    
});

$(document).on("mouseleave", "input.hooverfield", function () {
    if(!controlfocused){
        var txt = $(this).val();
        $(this).replaceWith("<label class='Editable'>" + txt +"</label>");
    }
});

$(document).on("blur", "input.Editfield", function () {
    controlfocused = false;
    var txt = $(this).val();
    $(this).replaceWith("<label class='Editable'>" + txt +"</label>");
});