将输入和输出输入的值隐藏为文本，可以通过显示输入来更改值

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

<强> UPDATED DEMO HERE

我希望这有帮助！