0

基本上，我需要的是页面上的标准标题，一旦单击，它就会“变成”一个 input[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>
4

1 回答 1

0

希望有效..

$('.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()})的原因

于 2013-01-31T15:17:56.827 回答