인라인 편집 헤더

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()}) jEditable 플러그인]에서