0

前の入力に値が入力された後にのみ有効にする無効な要素があります。問題はchange、入力がフォーカスを失い、フォーカスが次の無効でない要素に移動する前にトリガーされるため、disabled属性を削除してもダメです。

HTML:

Fill this before you continue:      <input id="a" />
Fill this after the previous input: <input id="b" disabled="disabled" />​

jQuery:

$('#a').change(function(){
    if (this.value === "")
        $('#b').attr('disabled', 'disabled');
    else
        $('#b').removeAttr('disabled');
});​

フィドル

disabledからに変更することでこの問題を克服することができましreadonlyたが、読み取り専用であり、私が好むように無効にされていません。readonly

考慮事項:

  • 複数のイベントにサブスクライブすることは、実際には正しくないようです。
  • ユーザーは、キーボードをまったく使用せずに、テキストを最初の入力に貼り付けることができます。
4

4 に答える 4

2

複数のイベントにサブスクライブしたくないと質問でおっしゃいましたが、これが私が考えることができる唯一の方法です。問題は、input all の値を変更するさまざまな方法が、C/C++ DOM と直接やり取りしているにもかかわらず、JS API を介して変更していないことです。詳細については、この質問を参照してください。

複数のイベントにサブスクライブしながらそれを行うための合理的な防弾方法は次のとおりです。

$('#a').on('keyup paste propertychange input', function() {
    if (this.value === "") $('#b').prop('disabled', true);
    else $('#b').removeAttr('disabled');
});

ここにデモンストレーションがあります: http://jsfiddle.net/HmzYR/

于 2013-01-02T18:12:05.477 に答える
1

またはにイベントを追加することを検討しましたonkeydownかonkeyup?

ユーザーが何かonkeyupを入力する必要がある場合は、検証を行い、他の入力要素の無効なプロパティを設定するイベントを追加できます。

イベントの順序についてはわかりませんがonkeyup、フォーカスが移動した後に発生すると思います。しかし、この場合、これはそれほど問題にはなりません。私が考えることができる 1 つのケースは、次のキーのシーケンスです: "a" backspace tab. 完璧な解決策は、キーを押す前にキーを使用して検査することだと思いますが、やのような判読できないキーの影響を予測するonkeydownのは困難です。backspacearrowdown

別の提案:onkeydownリスナーをアタッチしてキーを探しtabます。値を検証し、次の入力フィールドを有効にします。

本質的には、すべての入力イベント、またはフォーカスを変更するすべてのイベント ( など)をキャッチする必要がありますtab。そして、イベントが完了する前に行動しなければなりません。

于 2013-01-02T17:20:53.367 に答える
0

使用し、使用propしないattr:

$('#b').prop('disabled', true);

keyupまた、イベントの代わりにイベントにフックしてみてくださいchange。

ここにフィドルがあります：http://jsfiddle.net/maniator/swubm/3/

詳細については、こちらを参照してください: .prop() vs .attr()

を使用して切り取りと貼り付けを処理するためのフィドルmouseout: http://jsfiddle.net/maniator/swubm/4/ (以下のコメントに基づく)

于 2013-01-02T17:16:17.383 に答える
-2

答えを更新しました：http://jsfiddle.net/swubm/10/

Fill this before you continue:
<input id="a" />
<br>
<br>
Fill this after the previous input
<input id="b" disabled />​

JS:

$('#a').bind('input propertychange', function() {
    var value = $('#a').val();
    if (value == "")
        $('#b').attr('disabled', 'disabled');
    else
        $('#b').removeAttr('disabled');

});
于 2013-01-02T17:55:18.140 に答える