title: How do I fill an element using keypress event
body: <p>This is the code:</p>
  <pre><code>&lt;div class=&quot;sampletext&quot; contenteditable=&quot;true&quot; style=&quot;min-height: 40px;&quot;&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>What I'm trying to do is filling an element with <code>keypress</code> events.</p>
  <pre><code>&lt;div class=&quot;sampletext&quot; contenteditable=&quot;true&quot; style=&quot;min-height: 40px;&quot;&gt;
  &lt;span&gt;i need  to fill here with keyboard events. {ENTER}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I have write a basic function which fills the innerHtml,</p>
  <pre><code>function myFunction() 
  {
      var element = document.getElementsByClassName('sampletext')[0].firstChild;
      element.innerHTML = 'i need  to fill here with keyboard events.\n';
  }
  </code></pre>
  <p>Basically this function will do the job, but it won't work in the site which am trying. If am entering it from keyboard it works perfectly. The window is listening for the <code>keyenter</code> event.
  I'm using Chrome browser. The project was related with the cefsharp.</p>
  <pre><code>private void SampleFucntion()
  {
      string script = &quot;var element = document.getElementsByClassName('sampletext')[0].firstChild;element.innerHTML = 'i need  to fill here with keyboardevents.\n';&quot;;
      myBrowser.ExecuteScriptAsync(script);
  }
  </code></pre>
  <p>I already checked <a href="https://stackoverflow.com/questions/31361790/input-fill-with-keypress-simulation">input fill with keypress simulation</a></p>
  <p>So please help me how can I achieve this with pure JavaScript.</p>