title: Textarea editable except values from inputs
body: <p>I have two <code>input</code> fields and one <code>textarea</code>. When I type something in the <code>input</code> fields their <code>.val()</code> are automatically added to the <code>textarea</code>.</p>
  
  <p>It is working fine, but I want these values in the <code>textarea</code> as read-only.</p>
  
  <p>I want the textarea to behave like this:<br>
  I could type extra text but can't delete the text which is obtained from two <code>input</code> fields. </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>$(function() {
    var text1 = $('#text1');
    var text2 = $('#text2');
    var description = $('#description');
  
    function onChange() {
      description.val("Chesis No:  " + text1.val() + ", Engine No:  " + text2.val());
  
      var base = description.val();
      var regex = new RegExp("^" + base, "i");
      $('#description').on("input", function(ev) {
        var query = $(this).val();
        if (!regex.test(query)) {
          //ev.preventDefault();
          $(this).val(base);
        }
      });
    }
  
    $('#text1')
      .change(onChange)
      .keyup(onChange);
  
    $('#text2')
      .change(onChange)
      .keyup(onChange);
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" id="text1" placeholder="Chassis No" class="form-control" /&gt;
  &lt;input type="text" id="text2" placeholder="Engine No " class="form-control" /&gt;
  &lt;textarea rows="4" cols="50" name="postContent" id="description"&gt;&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/dreamfighterr/x4v0sxt8/" rel="nofollow noreferrer">https://jsfiddle.net/dreamfighterr/x4v0sxt8/</a></p>