how to highlight textbox using jquery

Question

Suppose i have two textboxes i.e textbox1 & textbox2. if i type something on textbox1 ,then highlight should happen on textbox2.

I tried like this on keyup event but its not highlighting

$("#textbox1").keyup(function(){
   $("#textbox2").effect("highlight"); ...`

How to solve this issue?

Working for me http://jsfiddle.net/r5QUT/, have you included your code in document ready? — Shaunak D, Jun 21 '14 at 18:16
@ShaunakD oh, is it posible to highlight only the text inside the textbox? — user2173803, Jun 21 '14 at 18:17
@ShaunakD No ,i mean, the same jqury Highlight effect on text of textbox2.. — user2173803, Jun 21 '14 at 18:21
@ShaunakD oh, then i will let it be simple without any effect. Thanks for your time — user2173803, Jun 21 '14 at 18:24

score 0 · Accepted Answer · answered Jun 21 '14 at 20:17

The highlight effect in jQuery UI is not intended to use for animating text color (it's for background color). So I think to achieve what you want, we can just animate the color property directly, to animate color, of course we still need to include jQuery UI in the project. Here is the code you can try:

var text2 = $('#textbox2');
$("#textbox1").keyup(function(e){
  var currentColor = text2.finish().css('color');
  text2.animate({color:'yellow'}, 50)
       .animate({color:currentColor}, 100);        
});

Note that to get the currentColor we have to use finish() to force all the animates to finish before getting the color using .css() method. Otherwise the currentColor may be the color which is currently animated. Also note that the finish() method is supported from version 1.9. So if you need to use jQuery with lower version (such as 1.8), I think you should initialize the currentColor outside (and once) the onkeyup handler. That's way each time you want to change the color of the #textbox2, you have to update the currentColor, although I think it's not common to change the color of a textbox frequently using script.

how to highlight textbox using jquery

1 Answers1

Demo.