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

更新されたデモはこちら

これが役立つことを願っています！