4

矢印キーを使用して、フォームの入力テキスト フィールド間を移動したい (次、前)。私はそれを実装するためのこの簡単な方法を見つけました:それにリンクしますが、私にとってはうまくいきません...フォームの後のHEADとBODYでも試しましたが、うまくいきません...

私のフォームがAJAX経由でページに送り返されていることが問題である可能性があると思います...

私はjQueryにあまり詳しくありません。誰かが私を助けてくれませんか?

これはjQueryコードです：

<script>
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which==39)
$(this).closest('td').next().find('input').focus();
else if(e.which==37)
$(this).closest('td').prev().find('input').focus();
else if(e.which==40)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
});
});
</script>
4

4 に答える 4

4

domready イベントの後に入力が動的に作成される場合は、変更する必要があります

$('input').keyup(function(e){
   ...

の中へ

$('body').on('keyup', 'input', function(e) {
   ...

そうすることで、bodyイベント委任を使用して要素で keyup イベントがキャプチャされます

詳細については、こちらのドキュメントを参照してください: http://api.jquery.com/on/

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、委任されたイベントを使用してイベント ハンドラーをアタッチします...

于 2012-11-06T09:46:27.440 に答える
0

上記のコードを少し改善しました。コードの問題は、入力フィールド内を移動できないことです。たとえば、'100.00|' の値があります。現在カーソルが最後にあります (| で示されます)。左キーを押すと、キャレットを「100.0 | 0」の位置に移動する代わりに、前の入力フィールドにジャンプします。

そのためには、e.target.selectionStart で現在のキャレットの位置を確認する必要があります。ただし、前のキャレット位置も必要です。そうしないと、キャレットが 1 から 0 に移動したか (ジャンプなし)、またはキャレットが既に 0 にあり、ユーザーがもう一度左を押した (ジャンプ) かを識別できません。

私が追加したもう 1 つの変更は、クラス tableInput を持つ入力フィールドのみが考慮されることです。一部のフィールドを除外したい場合。

function(e){
        var charPos = e.target.selectionStart;
    var strLength = e.target.value.length;
    var prevPos = $(this).data('prevPos');
    if(e.which==39){
                //only go right if we really reached the end, that means the prev pos is the same then the current pos
        if(charPos==strLength && (prevPos ==null || prevPos == charPos)){
            $(this).closest('td').next().find('input.tableInput').focus();
            $(this).data('prevPos',null);
        }else{
            $(this).data('prevPos',charPos);
        }
    }else if(e.which==37){
//only go left if we really reached the beginning, that means the prev pos is the same then the current pos
        if(charPos == 0 && (prevPos ==null || prevPos == charPos)){
            $(this).closest('td').prev().find('input.tableInput').focus();
            $(this).data('prevPos',null);
        }else{
            $(this).data('prevPos',charPos);
        }
    }else if(e.which==40){
        $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus();
        $(this).data('prevPos',null);

    }else if(e.which==38){
        $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus();
        $(this).data('prevPos',null);
    }
    });
于 2014-03-12T11:05:18.190 に答える
0

複数のイベントをバインドする場合は、次のようにします。 

$('body').on({
    'keyup' : function(e) {
        ...
    },

    'keydown' : function(e) {
        ...
    }
}, 'input');

また、ページに動的に追加されない (つまり、ページの読み込み時に存在する)'body'の親要素と交換することもできます。'input'したがって、diveach を含むものがある場合はinput、代わりにそれをバインドすることをお勧めします。

于 2012-11-06T10:35:58.083 に答える
0

フォームがページに表示される前にスクリプトがロードされた場合、キーアップ バインディングはロード時にバインドできません。使用してみてください：

$('input').live('keyup', function(e) { code here });
于 2012-11-06T09:48:14.330 に答える