内联编辑标题答案

【问题标题】：Inline editing headers内联编辑标题
【发布时间】：2013-01-31 23:42:52
【问题描述】：

基本上，我需要的是页面上的标准标题，一旦点击，它就会“变成”输入[type="text"] 或者更确切地说切换相关的输入字段。当您在输入字段中键入时，该值应该替换标题的文本，并且 tab 键也应该起作用，所以如果我专注于第一个字段或第二个字段并按“Shift tab”它将隐藏正确的字段。

这是我的 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>

【问题讨论】：

看jEditable plugin

标签： jquery html events

【解决方案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();
});

附言。我在使用 .show().focus() 时遇到了一些问题，这就是我使用 .fadeIn(100,function(){$(this).focus()}) 的原因>

【讨论】：