title: Get value of placeholder in empty input field with jquery?
body: <p>Something is weird and I'm stumped.</p>
  
  <p>When I have an input field with placeholder, eg:</p>
  
  <pre><code>&lt;input id="box1" placeholder="not applicable"&gt;
  </code></pre>
  
  <p>I've always been able to grab the user input, or if input is left <strong>empty</strong>, the placeholder value with jquery as such:</p>
  
  <pre><code>var text = $('#box1').val();
  </code></pre>
  
  <p>No big deal. using jquery <code>.val()</code> always did the trick. Then I started seeing some code output errors in previously working apps wherein empty inputs were not capturing the placeholder value.</p>
  
  <p>Did something change with the javascript engine that would account for this? Or is there a new way to get the placeholder value if the input field is empty?</p>
  
  <p>See this example: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#done').on('click', function(){
     if($('#box3').val() == ''){
              var box3 = $(this).data('placeholder');
          } else {
          var box3 = $('#box3').val();
          }
    $('#output').val(box3);
  });
  
  // Clicking the button doesn't capture the placeholder value if empty?</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input id="box3" placeholder="not applicable"&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button id="done"&gt;
  Done
  &lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;textarea id="output"&gt;&lt;/textarea&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;p&gt;
  Why doesn't the button click capture the value of the placeholder in this instance, using jquery 3.1.1?
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>