Extinguish a text value inside a text field using jQuery

Question

I'm not quite sure if this is possible or not, I'm pretty knowledgeable when it comes to jQuery and JavaScript in general, but I have a dead end. I created a simple plugin that clears text input in focus and then displays the default value if nothing has been entered.

Is it possible to release only text inside the text input, and not the entire field itself? All attempts seem to lead to the fact that the text field itself disappears and ultimately hides the element from presentation.

I came up with the decision to use intervals containing the default value and absolutely positioning them according to the text input, hiding and showing them depending on whether the user entered any text or not. I would prefer a very simple approach, if one exists.

Edit

Using the jQuery animation function, which is located in the jQuery user interface or is available as a plug-in for jQuery, you can animate the text color as the input color when focusing and blurring the field (as described below). Here is the code that I use in case you want to know how to do this.

obj.bind("focus", function() { if ($(this).val() == oldValue) { $(this).animate({ color: '#E8DFCC' }, 1000).val(''); } }); obj.bind("blur", function() { if ($(this).val().length <= 3) { $(this).animate({ color: '#56361E' }, 600).val(oldValue); } }); 

Answer 1

Just think, have you tried using the animation method to change the color of the text in the text box so that it matches the background? Then, when the animation is complete, you can clear the contents.

This is a thought. It has been a while since I used animation, but I could probably crack a sample code if you're interested.

Answer 2

here is what i use for just that. first add this to your javascript: http://plugins.jquery.com/project/color

then do the following:

 $('.search-input').focus(function(){ if($(this).val() == 'Default Text'){ $(this).animate({ color: '#fff' //your input background color. }, 500, 'linear', function(){ $(this).val('').css('color','#000'); //this is done so that when you start typing, you see the text again :P }); } }).blur(function(){ if($(this).val() == ''){ $(this).val('Default Text').css('color','#fff'); $(this).animate({ color: '#000' }, 500, 'linear'); } }); 

what this will do is fade the text with the background color, and then an empty input field. and when blurring, first display the default text, and then return it to its original color.

illusion:)

you can remove a lot of this if you don't really want to clear the field. But you got the idea. the key here are two things. use the color plugin and the .animate () effect.

Answer 3

I just ran into this problem, my solution is quite simple, just change the attribute "value" to "". This will essentially replace the text with nothing.

 $(selector).attr('value', '');