jQuery Change event on an <input> element - any way to retain previous value?
Question
I've been searching around this morning and I'm not finding any simple solutions... basically, I want to capture a change in an input element, but also know the previous value.
Here's a change event and an input element in its simplest form. Clearly, I can get the new value with $(elem).val(), but is there a sneaky method I'm missing for getting the previous value? I don't see anything in the jQuery API to do this, but maybe someone's already done this and has some tips?
<script>
$(document).ready(function(){
$('#myInputElement').bind('change', function(){
//var oldvalue = ???
var newvalue = $(this).val();
});
});
</script>
<input id="myInputElement" type="text">
I'm not against writing my own solution, I just want to make sure I'm not recreating the wheel here.
How to solved?
A better approach is to store the old value using .data. This spares the creation of a global var which you should stay away from and keeps the information encapsulated within the element. グローバル変数がなぜ悪いのか、実際の例を文書化しました。 はこちら
例
<script>
//look no global needed:)
$(document).ready(function(){
// Get the initial value
var $el = $('#myInputElement');
$el.data('oldVal', $el.val() );
$el.change(function(){
//store new value
var $this = $(this);
var newValue = $this.data('newVal', $this.val());
})
.focus(function(){
// Get the value when input gains focus
var oldValue = $(this).data('oldVal');
});
});
</script>
<input id="myInputElement" type="text">
関連
-
[解決済み] jQueryのイベントハンドラを削除する最良の方法?
-
[解決済み] jQuery データ属性の値に基づいて要素を検索する方法は?
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] jQueryでドロップダウンリストの選択値を変更する
-
[解決済み] jQuery チェックボックスの変更とクリックイベント
-
[解決済み] jQueryで入力変化を検出する?
-
[解決済み】jQueryを使用して入力テキストに値を設定する方法
-
[解決済み] jQuery select change event get selected option.
-
[解決済み】jQueryの「input」イベント
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JQueryを使って<input type="text">の変更をすべて(即座に)検出する。
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] IEでjQueryが.change()を認識するために
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?