內聯編輯標題

Question

基本上，我需要的是一個頁面上的標準標題，一旦被點擊，它就會變成一個輸入[type =「text」]，或者切換相關的輸入字段。當你在輸入字段中輸入時，值應該替換標題的文本，並且標籤鍵也應該起作用，所以如果我將焦點放在第一個字段或第二個字段並按下「Shift標籤」，它將隱藏正確的領域。

這裏是我的HTML標記

<div class="stepInformation" title="Click to edit"> 
     <h4 class="blue nameEdit">Enter Order Name</h4> 
     <input type="text" id="orderName" value="" placeholder="Enter Order Name" 
      style="display:none"> 
     <h4 class="blue descriptionEdit">Enter Order Description</h4> 
     <input type="text" id="orderDescription" value="" placeholder="Enter Order Description" 
      style="display:none"> 
</div> 

Answer 1

。希望工程..

$('.stepInformation h4').click(function(){$('.stepInformation input').hide();$(this).next('input').fadeIn(100,function(){$(this).focus()})}); 
$('.stepInformation input').keydown(function(e) { 
    var keyCode = e.keyCode || e.which; 
    if(keyCode == 9) { 
    e.preventDefault() 
    if(e.shiftKey) { 
    $(this).parent().find(':input').fadeIn(100,function(){$(this).focus()}); 
    } 
    else { 
    $(this).nextAll(':input:first').fadeIn(100,function(){$(this).focus()}); 
    } 
    $(this).hide() 
    } 
}); 
$('.stepInformation input').keyup(function(){ 
    $(this).prevAll('h4:first').text($(this).val()); 
}); 

這是隱藏的頭，但我不會使用它：

$('.stepInformation input').on('focus',function(){ 
    $('.stepInformation h4').show(); 
    $(this).prevAll('h4:first').hide(); 
}); 

PS 。我使用.show（）的一些問題。對焦（），這就是爲什麼我用.fadeIn（100，函數（）{$（本）.focus（）}）