Tricky(FFonly):Changing button status on cut/paste operation

rgo · **Joined:** Thu May 22, 2008 3:42 pm **Posts:** 2

I have a simple html page with a textbox and a button. I need to make button disabled/enabled on performing cut/paste operation respectively using mouse.

I could easily make it work on IE & Safari with using "mouseout" event. But this event has a different behavior in FF..here is how,

In IE/Safari, the ‘mouseout’ event doesn’t fires before the you perform any action (cut/paste) on context menu (right click pouup menu), so when mouseout event fires, we get the new value in textbox to change status of ‘Add” button.

But in Firefox, this event fires immediately after you move mouse out of textbox to perform any action (cut/paste) on context menu. So when mouseout event fires, we still have the old value in textbox and hence button remains in same state.

How can we handle this to change button status (disabled/enabled) immediately after we cut/paste text from textbox using mouse ?

This can be fixed up to an extend using timer i.e. adding a delay in invoking action method resultClicked() so that we get the new value in textbox. But that is not an expected soln.

Here is the html source I have,

<HTML>
<HEAD>
<script type="text/javascript">
function resultClicked(event){
var mobileNo= document.getElementById('text1').value;
if(mobileNo==""){
document.forms[0].AddButton.disabled = true;
} else{
document.forms[0].AddButton.disabled = false;
}
}
</script>
<FORM>
Mobile <input name="text1" type="text" value ="1111111111" id="text1" onkeyup="javascript:resultClicked(event);" onmouseout="javascript:resultClicked(event);" />
<input type="button" value="Add" name="AddButton">
</FORM>
</BODY>
</HTML>

rangana · **Posted:** Fri May 23, 2008 2:29 am

There are times, that the "structure" of your markups do comes an issue

Have you tried closing your head section first and opening the body section then:

Code:

<HTML> 
<HEAD> 
<script type="text/javascript"> 
function resultClicked(event){ 
var mobileNo= document.getElementById('text1').value; 
if(mobileNo==""){ 
document.forms[0].AddButton.disabled = true; 
} else{ 
document.forms[0].AddButton.disabled = false; 
} 
} 
</script> 
</head>
<body>
<FORM> 
Mobile <input name="text1" type="text" value ="1111111111" id="text1" onkeyup="javascript:resultClicked(event);" onmouseout="javascript:resultClicked(event);" /> 
<input type="button" value="Add" name="AddButton"> 
</FORM> 
</BODY> 
</HTML>

I'm unaware if this is just a test page, but always remember that a DTD is important too

Hope that helps.

rgo · **Joined:** Thu May 22, 2008 3:42 pm **Posts:** 2

Thanks Rangana for your response ..but that doesn't helps. It is the problem with the behavior of 'mouseout' event in FF and I am looking for a work around for that.

rangana · **Posted:** Mon May 26, 2008 8:49 am

I'm not seeing any oddity rgo, tested on both FF and IE, which seemed working (for me).

Tricky(FFonly):Changing button status on cut/paste operation

Who is online