jquery - 将输入和输出值隐藏为文本，并能够通过显示输入来更改值

Question

你能告诉我一个关于jquery的插件或解决方案吗？

我需要有一个电子邮件类型的输入字段。输入时，它显示就像附加的图像一样。

您可以单击更改链接，输入将再次显示该值。

最好的方法是什么？

谢谢！

Answer 1

像这样的东西？ <span>Eugene@gmail.com</span><a href="#" onclick="var value = $(this).prev().text();$(this).prev().hide().after('<input type=text name=email value="'+value+'">')">Change</a>

Answer 2

$("#changelink").click(function(){
   $("#emaildiv").text($("#inputarea").val())
})

Answer 3

您可以使用Jeditable 之类的插件，也可以实现如下自定义解决方案：

HTML

<label for="email">Email:</label>
<div id="email">eugene@gmail.com</div>
<a href="#" id="changeEmail" data-target="email">change</a>

JS

// Switch to Input //
$('#changeEmail').bind('click', function(e){

    // Prevent Switch if Already Input //
    if ($(this).get(0).tagName != 'input') {
        var $target = $('#'+$(this).data('target')); // Get Target Element
        var val = $target.text(); // Get Current Target Value

        // Swap Elements //
        $target.replaceWith('<input id="email" type="text" value="'+val+'" />');

        // Hide Change //
        $('#changeEmail').hide();
    }
});

// Switch to Div //
$(document).delegate('#email', 'blur', function(){

    // Prevent Switch if Input is Empty //
    if ($(this).val() != ''){
        $(this).replaceWith('<div id="email">'+$(this).val()+'</div>');
        $('#changeEmail').show();
    } else {
        $('#changeEmail').hide();
    }
});

此处更新演示

我希望这有帮助！