jQuery: Make a Button Visible When a TextBox Has Contents

Question

Given: I have a textbox and a hidden button.

Wanted: When the textbox is neither null nor empty, show the button. When the textbox is null or empty, hide the button.

Question: How should I do this? Should I use jQuery and bind to the textbox's keyup event?

Solution

Sure, the keyup event sounds like a fine idea. You might do something like:

$("textarea").keyup(function() {
  if ($(this).val().replace(/ /g, '') == '')
    $("#id-of-button").show();  
  else
    $("#id-of-button").hide();
});