jquery masking/alerting problem in IE

Question

I've got a table an input box that has a money input mask on it. I haven't had any problems with it yet, but now it doesn't seem to be working properly and I can't get anything to alert from it.

All of this is an internet explorer problem. Works fine in FireFox.

In firefox the mask works right as it only allows numbers and at a fixed format, but in ie, the format, or mask, is shown correctly when you're on focus, but as once you begin typing, the characters are being appended, rather than in place of the mask. It also is allowing non numeric characters. I've tried alerting in IE, but that also is not working. I can't find anything on this issue through google..

You'll have a better understanding of what it's doing if you check in firefox and then IE. It's the less advance cell at the bottom. or just append #less to the url.

I'll provide any code relevant to this..Though, I'm not getting any errors.

Code:

---

<td class="totals<cfif r EQ 1>1</cfif>"><cfif r EQ 1>Total<cfelse><input type="text" <cfif labels[r] EQ "Less Advance(if applicable)">id="less"</cfif><cfif labels[r] EQ "Net Due Employee">id="net"</cfif>id="totals" class="ttlR#r# total<cfif labels[r] EQ "Grand Total"> grandTot</cfif>" name="totals#r#" readonly="readonly" /></cfif></td>



$('#less').removeAttr("readonly").css("background-color", "none").css("text-align", "right").maskMoney({symbol: ""});

$('#less').keyup(function(){
    $('#net').val(Number($('.grandTot').val() - $('#less').val()).toFixed(2));
    alert($('#less').val());
});
//Get value of net total if page is refreshed.//
if($('#less').val() != "" || $('#less').val() != " "){
    $('#net').val(Number($('.grandTot').val() - $('#less').val()).toFixed(2));
}

Answer 1

It doesn't look like the mask is being applied at all in IE. Which plugin are you using for the masking?

EDIT

I'm testing with IE 7.0.5730.13 and the mask doesn't work at all. Focusing-on and typing-in the <input> yields no special functionality, but it does throw an error

Line:  13
Char:  12949
Error: Invalid property value.
Code:  0

Have you tried debugging this with Firebug lite?

Also, you need to up your discipline with utilizing jQuery efficiently. Reuse Reuse Reuse!

var $less     = $('#less')
  , $net      = $('#net')
  , $grandTot = $('#totals .grandTot')
;

$less
  .removeAttr( "readonly" )
  .css( "background-color", "none" )
  .css( "text-align", "right" )
  .maskMoney( {symbol: ""} )
;

$net.bind( 'update-total', function()
{
  $net.val( Number( parseFloat( $grandTot.val() ) - parseFloat( $less.val() ) ).toFixed( 2 ) );
} );

$less.keyup(function()
{
  $net.trigger( 'update-total' );
  alert( $less.val() );
});

//Get value of net total if page is refreshed.//
if ( $less.val() != "" || $less.val() != " " )
{
  $net.trigger( 'update-total' );
}

Answer 2

$('#less').keyup(function(){ $('#net').val(Number($('.grandTot').val() - $('#less').val()).toFixed(2)); alert($('#less').val()); });

You are quite likely overwriting your masking function with this. Take out everything but masking and then see if your masking works. If so then it is one of your additional functions overwriting the masking changes to the input box.