onChange confirm and window focus.

[pendragn]

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...

<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);" />
 
    function changedBaseballStat(element, event) {
        var textbox = $(element.id);
        if(textbox.value != this.editFieldOriginalValue) {
            if(confirm("You have changed the value of a field \n do you want to save?")) {
                this.saveBaseballStat(element);
            } else {
                textbox.value = this.editFieldOriginalValue;
            }
        }
    }
 
    function leaveBaseballStat(element, event) {
        var textbox = $(element.id);
 
        textbox.selectionBegin = textbox.selectionEnd;
 
        if(textbox.className == "editingInfo") {
            textbox.className = "editableInfo";
        }
    }
 

Any idea how to get around this?

[Vyath]

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...

<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);" />
 
    function changedBaseballStat(element, event) {
        var textbox = $(element.id);
        if(textbox.value != this.editFieldOriginalValue) {
            if(confirm("You have changed the value of a field \n do you want to save?")) {
                this.saveBaseballStat(element);
            } else {
                textbox.value = this.editFieldOriginalValue;
            }
        }
    }
 
    function leaveBaseballStat(element, event) {
        var textbox = $(element.id);
 
        textbox.selectionBegin = textbox.selectionEnd;
 
        if(textbox.className == "editingInfo") {
            textbox.className = "editableInfo";
        }
    }
 

Any idea how to get around this?

Why would you need both onkeydown and onchange?

[pendragn]

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.