0

基本的に、必要なのはページの標準ヘッダーであり、クリックすると入力[type="text"]に「変わる」か、関連する入力フィールドを切り替えます。入力フィールドに入力すると、ヘッダーのテキストが値に置き換えられ、タブ キーも機能するはずです。そのため、最初のフィールドまたは 2 番目のフィールドにフォーカスがあり、「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>
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 に答える