25

基本的に、「blur」イベントのテキストボックスで値が変更されているかどうかを確認する必要があります。値が変更されていない場合は、blurイベントをキャンセルします。

入力HTML要素のblurイベントでユーザーが値を変更したことを確認できる場合はどうなりますか？

4

11 に答える 11

35

これを行うためのネイティブな方法はないと思います。私がすることは、focus現在の値を要素 ( ) にアタッチされた変数に保存するイベントに関数を追加することelement.oldValue = element.valueです。その値 onBLur に対してチェックできます。

于 2010-02-25T10:03:16.280 に答える
6

ぼかしイベントをキャンセルすることはできません。タイマーで再フォーカスする必要があります。onfocus 変数を設定するかhasChanged、change イベントで変数を設定することができます。ぼかしイベントは、変更イベントの後に発生します (残念ながら、この状況では)。それ以外の場合は、onchange イベントでタイマーをリセットするだけで済みます。

私はこれに似たアプローチを取ります：

(function () {
    var hasChanged;
    var element = document.getElementById("myInputElement");
    element.onchange = function () { hasChanged = true; }
    element.onblur = function () {
        if (hasChanged) {
            alert("You need to change the value");

            // blur event can't actually be cancelled so refocus using a timer
            window.setTimeout(function () { element.focus(); }, 0);          
        }
        hasChanged = false;
    }
})();
于 2010-02-25T10:39:24.993 に答える
2

Jquery イベントを使用して、このロジックを実行できます

Step1 : 値を比較する変数を宣言する

var  lastVal ="";

ステップ 2: フォーカス時にフォーム入力から最後の値を取得する

  $("#validation-form :input").focus(function () {
                 lastVal = $(this).val();

  });

Step3:ぼかして比較

$("#validation-form :input").blur(function () {
                 if (lastVal != $(this).val())
                 alert("changed");
             });
于 2014-09-01T11:48:59.567 に答える
1

これが古いことは知っていますが、誰かが別の方法を必要とする場合に備えて、これを入れると思いました. これは (少なくとも私には) 醜いように見えますが、ブラウザーが -1 インデックスを処理する方法に対処しなければならないことが課題でした。はい、jquery.data を使用するとより適切に実行できることはわかっていますが、まだそれほど詳しくはありません。

HTMLコードは次のとおりです。

<select id="selected">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

JavaScriptコードは次のとおりです。

var currentIndex; // set up a global variable for current value

$('#selected').on(
  { "focus": function() { // when the select is clicked on
      currentIndex = $('#selected').val(); // grab the current selected option and store it
      $('#selected').val(-1); // set the select to nothing 
    }
  , "change": function() { // when the select is changed
      choice = $('#selected').val(); // grab what (if anything) was selected
      this.blur(); // take focus away from the select
      //alert(currentIndex);
      //setTimeout(function() { alert(choice); }, 0);
    }
  , "blur": function() { // when the focus is taken from the select (handles when something is changed or not)
      //alert(currentIndex);
      //alert($('#selected').val());
      if ($('#selected').val() == null) { // if nothing has changed (because it is still set to the -1 value, or null)
        $('#selected').val(currentIndex); // set the value back to what it originally was (otherwise it will stay at what was newly selected)
      } else { // if anything has changed, even if it's the same one as before
        if ($('#selected').val() == 2) { // in case you want to do something when a certain option is selected (in my case, option B, or value 2) 
            alert('I would do something');
        }
      }
    }
  });
于 2016-11-17T19:59:31.577 に答える
1

次のコードを使用できます。

var Old_Val;
var Input_Field = $('#input');

Input_Field.focus(function(){
     Old_Val = Input_Field.val();
});

Input_Field.blur(function(){
    var new_input_val = Input_Field.val();
    if (new_input_val != Old_Val){
          // execute you code here
    }
});
于 2016-06-22T08:31:47.717 に答える
0

このようなもの。ケビン・ナサディの上記の提案を使用して

this.value!=this.defaultValue

一連の入力で共有 CSS クラスを使用してから、次のようにします。

    for (var i = 0; i < myInputs.length; i++) {
        myInputs[i].addEventListener('blur', function (evt) {
            if(this.value!=this.defaultValue){
                //value was changed now do your thing
            }
        });
        myInputs[i].addEventListener('focus', function (evt) {
            evt.target.setAttribute("value",evt.target.value);
        });
    }
于 2018-07-20T14:59:16.783 に答える