0

required="yes"フォーム内のいくつかのフィールドで属性を使用しています。フォーム内に検索ボックスがあり、探しているアイテムがまだそこにない場合にドロップダウン リストを自動入力します。私の jQuery ではkeyup、フィールドのイベントを監視します。 $("input#search-input-text").keyup(function(event){}. event.preventDefault();他のことをする前にすぐに使用します。

私が気をつけていることの 1 つは、Enter ボタンです。押すと、検索結果の 1 つが現在選択されているかどうかを確認します。そうであれば、結果をページのドロップダウン リストに挿入します。しかし、そうでない場合は、フォームを送信させます。

問題は、属性を使用してフォーム フィールドを必須にすると、jQuery が無視され、jQuery を実行する前にアクションがキャンセルされ、フィールドが必須であることが通知されることです。このコードは、属性を使用して必須フィールドを持たないフォームで問題なく使用できます。必須フィールドが原因で組み込みのブラウザー機能が停止する前に、Enter キーの押下をキャッチするにはどうすればよいですか?

代用はできませんのでご了承くださいkeydown。さらに、そうしても、 false を返しても必須フィールドに関する警告が表示されます (それは明らかです)。keyupブラウザが実行する前にキャッチして、特定の状況下で完全に停止したい。

私のコードの一部。具体的にcase 13は、switch ステートメントの。フォームは、外側のifステートメントが false の場合にのみ送信する必要があります。

$("input#search-input-text").keyup(function(event){
    event.preventDefault();

    var _search_action = $("input#search-action").val();
    var _search_term = $("input#search-input-text").val();
    var dosearch = true;

    switch (event.keyCode) {
        case 13:
            dosearch = false;
            if ($("#drop-search-search-results").find("li.selected").text()){
                if ($('#search-drop-down').val()) {
                    $('#' + $('#search-drop-down').val()).append('<option value="' + $("#drop-search-search-results").find("li.selected").attr('id') + '">' + $("#drop-search-search-results").find("li.selected").text() + '</option>');
                    $('#' + $('#search-drop-down').val()).val($("#drop-search-search-results").find("li.selected").attr('id'));
                    $('.textbox-drop-search').hide();
                    $('.search-default-selection').show();
                    $("input#search-input-text").val('');
                }else{
                    $("input#search-input-text").val($("#drop-search-search-results").find("li.selected").text());
                }

                $("#drop-search-search-results").hide().html("");

                return false;
            }else{
                $("form.drop-search").submit();
                return true;
            }
            //alert('enter');
            break;
        case 37:
            dosearch = false;
            //alert('left');
            break;
        case 38:
            dosearch = false;
            moveUp();
            //alert('up');
            break;
        case 39:
            dosearch = false;
            //alert('right');
            break;
        case 40:
            dosearch = false;
            moveDown();
            //alert('down');
            break;
    }

ありがとう、ジェームズ

4

2 に答える 2

1

invalidそこで event と preventDefaultを使用できます。キーアップは引き続き機能します。スニペットの例を参照してください:

$('input').on('invalid', function(e){
    e.preventDefault(); 
    
});

$('input').on('keypress', function(e){
    if(e.keyCode == '13'){
      
    e.target.value = "input";
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" action="">
    Required input: <input type="text" name="usrname" required/>
    <input type="submit" />
</form>

于 2015-06-08T16:31:46.643 に答える
0

さらに検索してみると、ブラウザーがフォームを検証しないようにするにはnovalidate、フォーム タグに属性を追加する必要があることがわかりました。そのため、検索シーケンスを開始したときに属性を追加し、完了したら削除しました。これで私の問題は解決しました。

わかりやすくするために、必要に応じて$('form.form-class').attr('novalidate', true);andを使用し$('form.form-class').removeAttr('novalidate');ました。

于 2015-06-08T16:30:28.643 に答える