Hiding text input placeholder that has two styles when input field is entered

Hiding text input placeholder that has two styles when input field is entered

I have a form with a placeholder that contains two styles. On keyup, the placeholder text will disappear, but how can I make it disappear when the user enters the text input field, either by tabbing into the field or by clicking into the field? Here's what I have. I included a Fiddle as well:

  2.     <div class="container test">
  3.       <div class="row">
  4.         <div class="col-sm-12">
  5.           <div class="placeholder-above"></div>
  6.           <div class="guitar-service-address">
  7.             <span class="placeholder-location"><span class="placeholder-float">Find guitar repair specialist. </span><span class="font-alt">Enter your guitar make and model...</span></span>
  8.             <input id="input" type="text" />&nbsp;
  9.           </div>
  10.           <p class="help-block">What is this?</p>

  12.         </div>
  13.       </div>
  14.     </div>

  17. $(function() {
  18.       $("span.placeholder-location + input").keyup(function() {
  19.         if($(this).val().length) {
  20.             $(this).prev('span.placeholder-location').hide();
  21.         } else {
  22.             $(this).prev('span.placeholder-location').show();
  23.         }
  24.     });
  25.     $("span.placeholder-location").click(function() {
  26.         $(this).next().focus();
  27.     });
  28. });

  30. if ($(window).width() < 768) {
  31.    $(".placeholder-above").append( $(".placeholder-float").text() );
  32. }


  36. .container {
  37.   max-width: 990px;
  38. }

  40. .tab-placeholder {
  41.   display: none;
  42. }

  44. input[id="input"] {
  45.     width: 500px;
  46. }

  48. .guitar-service-address>span.placeholder-location {
  49.   position: absolute;
  50.   margin: 6px 8px;
  51.   color: #686e74;
  52.   cursor: auto;
  53.   font: Helvetica 15px/20px bold;
  54.   font-weight: bold;
  55.   z-index: 1;
  56. }

  58. .guitar-service-address>.placeholder-location>.font-alt {
  59.   color: #686e74;
  60.   font-weight: normal;
  61. }

  63.  input {
  64.   padding: 5px;
  65.   font-size: 11pt;
  66.   color: black;
  67.   border: 1px solid #979797; 
  68.   border-bottom: 4px solid #000;
  69. }

  71. .help-block {
  72.   font-size: 90%;
  73. }

  75. .test {
  76.   padding: 20px;
  77. }

  79. @media (max-width: 768px) { 
  80.   input[id="input"] {
  81.     width: 300px;
  82.   }
  83.   span > .placeholder-float {
  84.    display: none; 
  85.   }
  86.   .tab-placeholder {
  87.    display: block;
  88.   }
  89. }

http://jsfiddle.net/Codewalker/6or8pwjx/46/