set default values if empty

Question

I'm changing the text of an element based on the input:

$("input#txtName").keyup(function(){
      $(".website-info h3 strong").text($(this).val());
    });
$("input#txtUrl").keyup(function(){
      $(".website-info h3 small").text($(this).val());
    });

It works, but I want to show default values as soon as the text is empty or user has entered nothing to prevent white space. I tried the if... is.(:empty) condition but it doesn't help cause .text doesn't seem to set default values.

Answer 1

A concise and pretty standard way of doing this is using the || operator.

$("input#txtName").keyup(function(){
      $(".website-info h3 strong").text($(this).val() || "Default text");
    });

Answer 2

Consider using the placeholder HTML attribute of input elements. Set the attribute in your HTML

<input type="text" id="txtName" placeholder="default text here" />

or with jQuery after the page loads

$("input#txtName").attr("placeholder", "default text here");

Here is the MDN page on the <input> element