將輸入和輸出的輸入值隱藏爲文本，並通過顯示輸入來更改值

請問您可以給我一個插件或jQuery解決方案。將輸入和輸出的輸入值隱藏爲文本，並通過顯示輸入來更改值

我需要有一個電子郵件類型的輸入字段。當輸入時，它顯示就像附加的圖像。

change on click

您可以點擊更改鏈接，輸入將再次與該值顯示。

這樣做的最好方法是什麼？

謝謝！

來源

2012-06-05 Rootical V.

不幸的是，我還沒有設法找到任何解決方案，但這就是爲什麼我問。 –

你可以你喜歡Jeditable一個插件或執行類似以下的定製解決方案：

HTML

<label for="email">Email:</label> 
<div id="email">[email protected]</div> 
<a href="#" id="changeEmail" data-target="email">change</a>

// 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

我希望這有助於！

來源

2012-06-05 13:11:17 dSquared

這太棒了！但是，您能否提供一些更改以使默認輸入可用？然後在輸入一些數據後將其保存爲目標元素？非常感謝！它可以工作，但是如何才能更好地隱藏更改按鈕，直到電子郵件未輸入？ –

@RooticalV。看看更新後的答案/演示。 – dSquared

再次感謝，但請你能說爲什麼.changeEmail不會隱藏在我的例子中？ http://jsfiddle.net/n9BkM/7/ –

像這樣的東西？ <span>[email protected]</span><a href="#" onclick="var value = $(this).prev().text();$(this).prev().hide().after('<input type=text name=email value="'+value+'">')">Change</a>

來源

2012-06-05 13:01:44 Thomas

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

來源

2012-06-05 13:02:04

我不知道你的HTML，所以我彌補元素 –

將輸入和輸出的輸入值隱藏爲文本，並通過顯示輸入來更改值

回答

相關問題