内联编辑标题

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（）}）