title: At what point does text entered into a text input element become that input's value?
body: <p>My question is: <strong><em>at what point</em> does text entered into an HTML text input field become the value of that input field?</strong></p>
  
  <p>I should note that the problem I am trying to solve is incidental (though I have included it below for the sake of context).</p>
  
  <p>In the process of trying to solve this problem I realised that I needed a wider understanding of exactly what was going on, hence my more general question. I am unable to find any documentation explaining at what point text entered into a text field (or any HTML object that accepts text input) becomes part of that object (as a value, etc).</p>
  
  <hr>
  
  <h2>Incidental problem I am trying to solve:</h2>
  
  <p>I have a bunch of <code>input[type='text']</code> fields on a page. Some of the fields are pre-populated with values and some have empty values (<code>value=''</code>).</p>
  
  <p>I have a script that prevents users from deleting or adjusting the text in the pre-populated fields but allows them to enter text in the empty fields.</p>
  
  <p>However, once a user "leaves" a field, i.e. clicks outside of the field, the entered text is no longer editable, <strong>even though the value of the field does not appear to have been updated (at least as far as I can see in Chrome Developer Tools)</strong>. To me, this suggests that the entered text has become the value of that field? But if that is the case, why doesn't Chrome Dev Tools reflect this?</p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;form id="group-email-form"&gt;
  
      &lt;input type="text" value="test1@test.com"&gt;
  
      &lt;input type="text" placeholder="Email Address 2" value=""&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <h2>jQuery:</h2>
  
  <pre><code>$('#group-email-form input').on('focus', function() {
  
      var myValue = $(this).val();
  
      console.log(myValue);
  
      if ( myValue == '' ) {
  
          console.log('input has empty value');
  
      }
  
      else {
  
          console.log('input has a value');
  
          $(this).keydown( function (e) {
  
              var keyCode = e.keyCode || e.which;
  
              if ( keyCode == 9 ) {
  
              }
  
              else {
  
                  return false;
  
              }
  
          });
  
      }
  
  });
  </code></pre>