By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,504 Members | 1,140 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,504 IT Pros & Developers. It's quick & easy.

onChange confirm and window focus.

P: 2
I've come across a problem I just can't solve.

I have an text element I need to evaluate on change. All I need to do is open a confirm dialog asking if they'd like to save the change, if yes, I save the change and move on, if no the textbox needs to revert to it's original value. All of this works wonderfully as long as the browser window keeps focus durring the onchange event.

However if the window looses focus triggering the onchange event all hell breaks loose.

This may be related to the fact that the same element also has an onblur event... heck here's the relavant code...

Expand|Select|Wrap|Line Numbers
  1. <input id="mainContact" class="editableInfo" style="width: 111px;" type="text" value="customerNameHere" onfocus="editBaseballStat(this, event);" onkeydown="processBaseballStatKey(this, event);" onblur="leaveBaseballStat(this, event);" onchange="changedBaseballStat(this, event);" />
  2.  
  3.     function changedBaseballStat(element, event) {
  4.         var textbox = $(element.id);
  5.         if(textbox.value != this.editFieldOriginalValue) {
  6.             if(confirm("You have changed the value of a field \n do you want to save?")) {
  7.                 this.saveBaseballStat(element);
  8.             } else {
  9.                 textbox.value = this.editFieldOriginalValue;
  10.             }
  11.         }
  12.     }
  13.  
  14.     function leaveBaseballStat(element, event) {
  15.         var textbox = $(element.id);
  16.  
  17.         textbox.selectionBegin = textbox.selectionEnd;
  18.  
  19.         if(textbox.className == "editingInfo") {
  20.             textbox.className = "editableInfo";
  21.         }
  22.     }
  23.  
Any idea how to get around this?
Dec 1 '06 #1
Share this Question
Share on Google+
2 Replies


P: 3
I've come across a problem I just can't solve.

I have an text element I need to evaluate on change. All I need to do is open a confirm dialog asking if they'd like to save the change, if yes, I save the change and move on, if no the textbox needs to revert to it's original value. All of this works wonderfully as long as the browser window keeps focus durring the onchange event.

However if the window looses focus triggering the onchange event all hell breaks loose.

This may be related to the fact that the same element also has an onblur event... heck here's the relavant code...

Expand|Select|Wrap|Line Numbers
  1. <input id="mainContact" class="editableInfo" style="width: 111px;" type="text" value="customerNameHere" onfocus="editBaseballStat(this, event);" onkeydown="processBaseballStatKey(this, event);" onblur="leaveBaseballStat(this, event);" onchange="changedBaseballStat(this, event);" />
  2.  
  3.     function changedBaseballStat(element, event) {
  4.         var textbox = $(element.id);
  5.         if(textbox.value != this.editFieldOriginalValue) {
  6.             if(confirm("You have changed the value of a field \n do you want to save?")) {
  7.                 this.saveBaseballStat(element);
  8.             } else {
  9.                 textbox.value = this.editFieldOriginalValue;
  10.             }
  11.         }
  12.     }
  13.  
  14.     function leaveBaseballStat(element, event) {
  15.         var textbox = $(element.id);
  16.  
  17.         textbox.selectionBegin = textbox.selectionEnd;
  18.  
  19.         if(textbox.className == "editingInfo") {
  20.             textbox.className = "editableInfo";
  21.         }
  22.     }
  23.  
Any idea how to get around this?
Why would you need both onkeydown and onchange?
Dec 2 '06 #2

P: 2
Why would you need both onkeydown and onchange?
In this case it's because we're running a couple of special exceptions to the onchange. For example if the user hits enter it saves without prompting, and if the user hits escape it cancels the edit.

Ah the fun of duplicating full GUI Type functionality with a a web browser.
Dec 4 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.