Question

基本上，我需要的是页面上的标准页眉，一旦点击，它就会“变成”输入[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>

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（）。focus（）时遇到了一些问题，这就是为什么我使用 .fadeIn（100，function（）{$（this）.focus（）}）

内联编辑标题

1 个答案: