11

ページにいくつかのテキストボックスがあり、ユーザーがそれらのいずれかでEnterキーを押したときにリンクをクリックしたいと思います。

event.keyCodejavascriptを使用して（13インチとを検索することで） Enterボタンを簡単にトラップできますevent.whichが、ブラウザーのオートコンプリート機能が起動し、ユーザーが入力したい内容を提案するときに問題が発生します。ユーザーは、タブではなく、Enterキーを押してブラウザの提案を受け入れることがよくあります。これは、リンクがすぐにクリックされるため、ユーザーを混乱させますが、ユーザーは他のいくつかのフィールドにテキストを入力することを意図していました。

ここでフォームと送信ボタンを使用する方がよいことはわかっていますが、さまざまな理由から、これは実用的ではありません。

私はjQueryを使用しているので、jQueryソリューションを自由に提供してください。

4

10 に答える 10

9

受け入れられた回答でtuanvtのアイデアを使用して、私はその仕事をするjQueryプラグインを作成しました。

ユーザーが上、下、ページアップ、ページダウンのキーを押して、オートコンプリートボックスに入ったことを確認します。他のすべてのキーは、それらがそれを残したことを意味します。

これらのルールをテキストボックスにのみ適用するようにします。他のすべての入力要素は正常に動作します。

Operaは、私が達成しようとしていたことをすでにかなりうまく行っているので、そのブラウザーでルールを適用しません。そうしないと、ユーザーはEnterキーを2回押す必要があります。

IE6、IE7、IE8、Firefox 3.5.5、Google Chrome 3.0、Safari 4.0.4、Opera10.00でテスト済み。

これは、jquery.comでSafeEnterプラグインとして利用できます。便宜上、リリース1.0のコードは次のとおりです。

// jQuery plugin: SafeEnter 1.0
// http://plugins.jquery.com/project/SafeEnter
// by teedyay
//
// Fires an event when the user presses Enter, but not whilst they're in the browser's autocomplete suggestions

//codesnippet:2e23681e-c3a9-46ce-be93-48cc3aba2c73
(function($)
{
    $.fn.listenForEnter = function()
    {
        return this.each(function()
        {
            $(this).focus(function()
            {
                $(this).data('safeEnter_InAutocomplete', false);
            });
            $(this).keypress(function(e)
            {
                var key = (e.keyCode ? e.keyCode : e.which);
                switch (key)
                {
                    case 13:
                        // Fire the event if:
                        //   - we're not currently in the browser's Autocomplete, or
                        //   - this isn't a textbox, or
                        //   - this is Opera (which provides its own protection)
                        if (!$(this).data('safeEnter_InAutocomplete') || !$(this).is('input[type=text]') || $.browser.opera)
                        {
                            $(this).trigger('pressedEnter', e);
                        }
                        $(this).data('safeEnter_InAutocomplete', false);
                        break;

                    case 40:
                    case 38:
                    case 34:
                    case 33:
                        // down=40,up=38,pgdn=34,pgup=33
                        $(this).data('safeEnter_InAutocomplete', true);
                        break;

                    default:
                        $(this).data('safeEnter_InAutocomplete', false);
                        break;
                }
            });
        });
    };

    $.fn.clickOnEnter = function(target)
    {
        return this.each(function()
        {
            $(this)
                .listenForEnter()
                .bind('pressedEnter', function()
                {
                    $(target).click();
                });
        });
    };
})(jQuery);
于 2009-11-18T12:00:37.617 に答える
5

ユーザーがオートコンプリートテキストのいずれかを正しく選択する場合は、常に下キーを押す必要があります。下キーを押したときに変数を設定してから、Enterキーを押した後、変数を確認してください。変数が設定されている場合はリンククリック機能を実行しないでください。それ以外の場合は通常どおり実行してください。

于 2009-10-30T11:17:46.827 に答える
3

チェックボックスでオートコンプリートをオフに設定してみてください。これはすべてのブラウザで標準ではありませんが、一般的なブラウザでは機能します。

<input type="text" autocomplete="off" />
于 2009-10-30T10:30:27.343 に答える
3

JQueryは素晴らしく、すべてですが、単純なJavaScriptを使用してみませんか？

function submit_on_enter(e) {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = (e.keyCode ? e.keyCode : e.which);
    else return true;

    if (keycode == 13) {
        if (window.previousKeyCode) {
            // down=40,up=38,pgdn=34,pgup=33
            if (window.previousKeyCode == 33 || window.previousKeyCode == 34 ||
                window.previousKeyCode == 39 || window.previousKeyCode == 40) {
                    window.previousKeyCode = keycode;
                    return true;
            }
        }
        submit_form();
        return false;
    } else {
        window.previousKeyCode = keycode;
        return true;
    }
}
于 2012-06-02T16:59:18.137 に答える
2

キーアップイベントでエンターキーを追跡します。キーアップイベントでエンターキーを検出するまでに選択が完了します。

キーダウン時にEnterキーを検出し、操作を行うとオートコンプリート機能が妨げられます。

于 2011-07-13T21:03:27.080 に答える
2

これは私のために働きます：

$('input').keypress(function(e) {
    if(e.which == 13) {
        if(this.value)
        {
            $("#submitbutton").click();
        }
    }
});
于 2012-09-06T09:24:17.790 に答える
1

新しいhtml5フォームフィールドタイプを使用している場合は、teedyayのコードを次のように変更することをお勧めします。

case 13:
                    // Fire the event if:
                    //   - we're not currently in the browser's Autocomplete, or
                    //   - this isn't a textbox, or
                    //   - this is Opera (which provides its own protection)
                    if (!$(this).data('safeEnter_InAutocomplete') || !$(this).is('input([type=text],[type=email],[type=number],[type=search],[type=tel],[type=url])') || $.browser.opera)
                    {
                        ...

新しい入力タイプに注意してください。

于 2012-04-23T19:50:27.440 に答える
0

ウィンドウでキーの押下をトラップしているのか、特定のDOM要素でトラップしているのかわかりません。後者（form要素など）を実行してから、イベントハンドラーでイベントオブジェクトを調べて、どのDOM要素がイベントの発生元であるかを判断する必要があります。これがオートコンプリートのあるテキストフィールドの場合は、return false;。

jQueryの.keypress()イベントハンドラーとevent.targetイベントオブジェクトのプロパティを見てください。

于 2009-10-30T11:07:51.103 に答える
0

私は同じ問題に直面し、完璧ではありませんが、より単純だと思う別のアプローチを使用しました。オートコンプリートを作成するときに、selectイベントの現在の時刻を設定し、アクションを実行する前にそれを比較します。

$('#completer').autocomplete({
  source: ['First', 'Last'], delay: 0, minLength: 0,
  select: function(ev, ui) {
    $(ev.target).data('lastAutocompleteSelectTimestamp', new Date().getTime())
  }
})

$(document).on('keydown', '#completer', function(ev){
  if (ev.which != 13) return
  var lastAutocompletionTime = $(ev.currentTarget).data('lastAutocompleteSelectTimestamp')
  if (!lastAutocompletionTime || (new Date().getTime() - lastAutocompletionTime) > 100)
    alert('Enter pressed outside autocomplete context')
})
<html>
<head>
  <link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
  <input id=completer type=text />
</body>
</html>

于 2014-10-09T21:09:04.760 に答える
0

もう1つの（より安全な）アプローチは、 andイベントを使用して値の変化を検出することです。keyupkeydown

オートコンプリートは、イベントの後に値を設定します。keyDown両方のイベントが観察された場合、以下は他のソリューションよりもはるかに信頼性があります。

var tempValue;
// fire when enter is 1. pressed and 2. released
function handlerEnter(type){
     // save the value for comparison
     if(type == 'keyDown'){
         tempValue = document.activeElement.value;
         return null; // quit
     }

     // quit when the value changed in between keyDown & keyUp
     if(type == 'keyUp' && tempValue != document.activeElement.value){
         return null;
     }

     // autocomplete wasn't used
     doStuff();
}

document.activeElementが入力であるかどうかを確認することをお勧めします。私の邪悪なプロトタイプ拡張機能を自由に使用してください。

于 2016-07-21T02:00:14.143 に答える