Jquery切換文本到輸入字段點擊時

Question

我有一個文本跨度，我想用jQuery聽，如果訪問者點擊文本，它應該用輸入字段（這是從開始隱藏）替換該文本。如果訪問者將輸入字段留空並將其置於焦點之外，則應該隱藏輸入並再次顯示文本。

幫助將不勝感激。

編輯：

這是當前的代碼，我有：

$("span").click(function() { 
$(this).hide(); 
$("input").toggle(); 
}); 

Answer 1

如果您在DOM中移動東西，則無需創建隱藏元素。您可以使用jQuery的.replaceWith()以較少的代碼執行此操作。

$('body').on('click', '#mySpan', function (event) { 
    $(this).replaceWith("<input id='myInput' type='text' />"); 
    $('#myInput').focus(); 
}); 

$('body').on('focusout', 'input', function (event) { 
    if($(this).val() == ""){ 
    $(this).replaceWith("<span id='mySpan'>Sample Text</span>"); 
    } 
}); 

小提琴 - http://jsfiddle.net/jX7rM/2/

Answer 2

試試這個：

$(function() { 
    $(document).on('click', 'span', function() { 
    var input = $('<input />', { 
     'type': 'text', 
      'name': 'unique', 
      'value': $(this).html() 
    }); 
    $(this).parent().append(input); 
    $(this).remove(); 
    input.focus(); 
}); 

$(document).on('blur', 'input', function() { 
    $(this).parent().append($('<span />').html($(this).val())); 
    $(this).remove(); 
}); 
}); 

Fiddle

Answer 3

試試這個代碼：

DEMO

$("span").click(function(){ 
    $("input").show().change(function(){ 
     $("span").show(); 
     $(this).hide(); 
    }); 
    $(this).hide(); 

    }); 

Answer 4

您是否在尋找contenteditable跨度？

設置你的跨度contenteditable="true"

檢查小提琴。 JSFiddle