使用jQuery製作一個<span>到和<input>和

因此，我有一個頁面，其中的字段是s，當用戶點擊它們時，它們會更改爲輸入以允許更改它們的值。當用戶在輸入之外單擊時，它將變回一個範圍。下面是我使用的代碼：使用jQuery製作一個<span>到和<input>和

$(function() { 
$('.txtToInput').live('click', function() { 
    var input = $('<input />', {'type': 'text','class': 'txtToInput', 'name': 'aname', 'value': $(this).html()}); 
    $(this).parent().append(input); 
    $(this).remove(); 
    input.focus(); 
}); 

$('.txtToInput').live('blur', function() { 
    var span = $('<span />', {'class': 'txtToInput'}); 
    $(this).parent().append($(span).html($(this).val())); 
    $(this).remove(); 
}); 
});

這工作得很好，但有一個問題：當用戶突出顯示文本輸入內容跳轉輸入外部和元素不能被改回跨度。任何想法是什麼導致這一點以及如何解決？

這裏是a fiddle表明這種行爲。

來源

2013-05-16 harryg

爲什麼不能有一個輸入元素和跨度？在任何情況下，其中一個是隱藏的。當在輸入上觸發模糊事件時，您將更新span元素的文本或內部HTML。 – Terry

@Terry這正是我所建議:) – Alnitak

問題修正：

textbox = false; 
$(function() { 
    $('.txtToInput').live('click', function() { 
     if (!textbox) { 
      var input = $('<input />', { 
       'type': 'text', 
       'class': 'txtToInput', 
       'name': 'aname', 
       'value': $(this).html() 
      }); 
      $(this).parent().append(input); 
      $(this).remove(); 
      input.focus(); 
      textbox = true; 
     } 
    }); 

    $('.txtToInput').live('blur', function() { 
     if (textbox) { 
      var span = $('<span />', { 
       'class': 'txtToInput' 
      }); 
      $(this).parent().append($(span).html($(this).val())); 
      $(this).remove(); 
      textbox = false; 
     } 
    }); 
});

小提琴：http://jsfiddle.net/QNR5z/1/

你只需要檢查的對象是在「輸入」版本或「跨度」的版本，因爲這個問題是，雖然對象是在「輸入」版本，但如果用戶點擊對象代碼創建一個新的文本框

來源

2013-05-16 09:23:58 gamehelp16