2

ブートストラップに x-editable を使用して、クライアント データで編集可能なテーブル フィールドを作成します。私が抱えている問題は、時には数百文字の長さのコメント用のフィールドがあることです。これにより、空白:nowrap を使用する必要があるため、テーブルが見苦しく見えます。

これを回避するために、jQuery を使用してコメントのセクションのみを表示し、ページの読み込み時に編集可能なフィールドを非表示にしましたが、カーソルを合わせると展開しました。私が抱えている問題は、他のすべてのフィールドが x-editable でオンフォーカスで選択可能であり、このフィールドも選択可能にしたいということです。フィールドにカーソルを合わせると問題なく Tab で移動できますが、Tab で移動して編集可能なフィールドをトリガーする方法に興味があります。

もう1つの解決策は、php出力の文字数を制限するか、jQueryでそれらを非表示にして、Tabキーを押したときにフィールドを拡張することですが、その方法がわかりません。:focus と document.activeElement() を調べてみましたが、それらを機能させる方法が見つかりませんでした。

サンプルコードをjsfiddleに追加しました。の前に入力フィールドを追加しました。これは、テーブル x-editable を Tab で移動すると、フィールドが入力要素になるためです。編集可能なフィールドがアクティブな場合はタブで移動できますが、そうでない場合はフィールドがスキップされ、トリガーされません。

これは、編集可能なフィールドを保持する のサンプルです

<td id="comment" style="border:1px solid #000000;">
    <p id="short_comment">Short comment</p>
    <p id="collapse"><a href="#" id="editable">A much longer comment that will appear</a></p>
</td>

これはjQueryのサンプルです

$('#collapse').hide();
$('#comment').on('mouseenter', function(f) {

    $('#short_comment').hide();
    $('#collapse').show();

    $("#collapse").on("show",function(event){
        $('#comment').width('200px');
    });

    $("#collapse").on("hide",function(event){
        $('#comment').width('50px');
    });
});

$('#comment').on('mouseleave', function(f) {
    $('#short_comment').show();
    $('#collapse').hide();
});
4

1 に答える 1

1

  1. HTML にタブインデックスを追加して、タブフローを制御します。

    <table>
  <tr>
    <td><input type="text" tabindex='1' /></td>
    <td id="comment" tabindex='2'>
        <p id="short_comment">Short comment</p>
        <p id="collapse"><a href="#" id="editable">A much longer comment that will appear</a></p>
     </td>
    </tr>
</table>

  2. CSS を追加します。

    #comment:hover #collapse, 
#comment:focus #collapse {
    display:block;
}
#comment #collapse, 
#comment:hover #short_comment, 
#comment:focus #short_comment {
    display:none;
}

  3. Javascript を削除する

デモ: JSFIDDLE

于 2013-04-03T09:19:34.907 に答える