Question

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

但你能做到这一点的方式非常简洁。

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

输入一些文字时自动调整文本框
onhover，将标签更改为输入字段
onleave，再次将输入字段更改为标签。
自动保存内容

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

我创建了一个小例子，但还没准备好。

jsfiddle.net/mJMpw/402

有没有人有过谷歌这样做的经验。

这里还有一些工作

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

我可以使用任何好的库来获得与Google输入行为相同的结果吗？

Answer 1

管理以使用contenteditable属性创建更简单的方法。目前它在视觉上与谷歌的输入相似，但没有障碍。在功能方面，它可以按照您的预期工作：自动调整大小，最小宽度，可编辑，但在没有悬停和处理的情况下看起来并不是这样，并且可以保存＆＃34;离开时。

＆＃13;

$(".google").blur(function(evt) {
    //Insert real saving logic here.
    console.log("Save things!");
});

＆＃13;

* {
    box-sizing: border-box;
}
.google {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    width: auto;
    border: none;
    min-width: 80px;
    font-family: sans-serif;
}
.google:hover, .google:focus, .google:active {
    border: 1px solid gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="google" size="1" contenteditable="true">Hello</div>

＆＃13;

它实际上并不需要jQuery，它只用于blur处理程序。

创建Google联系人等输入字段

1 个答案: