web-dev-qa-db-ja.com

jQueryによるフォーム入力のオートコンプリートの検出

すべてのテキストフィールドが各keyup（）およびfocus（）;で有効かどうかを検出するフォームがあります。それらがすべて有効であれば、ユーザーが送信ボタンを押すことができるようになります。ただし、ユーザーがテキスト入力の1つにブラウザーのオートコンプリート機能を入力すると、送信ボタンが有効になりません。

JQueryを使用して、どのように変更されたかに関係なく、入力が変更されたかどうかを検出する方法はありますか？

javascriptjqueryformsautocompletedetect
32
Ryan

JQuery changeイベントは、ぼかしが発生したときにのみ発生します。入力すると、キーアップイベントが発生します。オートコンプリートオプションをクリックしても起動しません。これを検出する方法も探していますが、現在は

$(selector).bind("change keyup",function(){
    //Do something, probably with $(this).val()
});

しかし、それは問題を完全に解決しません...

15
Spycho

on inputの<input>を使用して、テキストベースの変更（ctrlやshiftなどのキーを除く）を検出することができます。

例えば：

$(input).on('input', function() { 
    console.log($(this).val()); 
});
25
cheshireoctopus

自分が使った

$(selector).on("change keyup blur input", function() {});

chromeでうまくいった。 inputがオートコンプリートで機能するようになった理由です。

12
avoliva

私の問題は、自動入力（lastpassや1passwordなどのプラグインを使用）と上記の問題を検出することでした。

私のために働いた解決策は：

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

JSFiddleのデモを参照 。

2
Justin

同じ問題が発生した後、私はまともな解決策を持っています。フォームフィールドに通常どおりにキーアップを設定し、次に周囲のdivにマウスを合わせます。したがって、オートコンプリートオプションをクリックすると、マウスがdivの上に置かれます。

$("#emailaddress").bind("keyup", function() {
    displayFullSubcribeForm();
});

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});
1
James Wilson

JQuery .change() 関数を使用できます。

ページが最初にロードされた後、フォーム全体を検証して、実際に入力されていないことを確認することができます。その後、 .change() を使用して、変更があったかどうかを確認できますフォーム上で、何か変更があった場合は、フォームを再度検証します。

_$(document).ready(function() {
   // validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<script type="text/javascript">     
    $('.target').change(function() {
        alert('Something changed');
        // Try validating form again (if valid, activate submit button)
    });
</script>
_

プランB

別のオプションは、送信ボタンを常にクリック可能にすることですが、フォームのバリデーターにバインドするには .submit() を使用します。次に、IS有効な場合は続行します。フォームIS無効な場合は .preventDefault() を使用しますフォームの送信を停止します.....そして、欠落しているフィールドを示す警告メッセージも表示します。

0
Peter Ajtai

答えは this の質問に記載されています。 jQueryは使用しませんが、オートコンプリートで機能します。

Js onpropertychangeイベントを使用します。

0
Yehuda Shapira

ユーザーが適度にアクティブである限り、それが無効にならない（私の場合は赤に変わる）フィールドで非常に優れたユーザーエクスペリエンスを望みました。まだフィールドに記入しています。

通常の入力でこれを行うために、keyupをすぐに検証できるように接続しながら、debounce関数を使用してblurに接続できました。 keyupはラストパスによってトリガーされたようですが、デバウンスしたため、検証に遅延がありました。 @ peter-ajtaiのおかげで、changeイベントを追加しようとしましたが、実際に最後のパスをキャッチし、他の機能をそのままにしました。

Coffeescriptの例：

@fieldExp .keyup($.debounce(@_onExpChange, 3000)) .blur(@_onExpChange) .change(@_onExpChange)

これはうまくいき、lastpass form fillは即座に検証をトリガーします。

0
kross