jQuery Forum

I want to share a problem and possible solution to an issue I had when using jQuery and FireFox 3.5.19 with input fields.

Scenario
I have a text input field with no value

1. <input type='text' />

I add the value through jQuery

1. $('input').attr('val', 'enter');

All works well.

Now I want to replicate the functionality of a 'placeholder' HTML5 attribute and do so by the following:

- On key-down check if the input's value is equal to 'enter' and if so then remove the value using the 'attr' method, e.g.

1. $('input').attr('value', '');

- On key-up check if the input field has no value and if so then add the value using the 'attr' method, e.g

1. $('input').attr('val', 'enter');

Issue

FireFox 3.5.19 does not render the new values of the 'attr' method. Firefox 3.5.19 will change the DOM accordingly, but will not render the new value in the input field.

Solution

Don't use the 'attr' method, use the 'val' method.

Hope this helps anyone who is struggling with the same issue.