JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<h3>
Normal Textarea
</h3>
<textarea rows="5" cols="30"></textarea>
<p>Notice that if you hit tab, it blurs the current input and focuses the next.  This functionality is identical in both desktop and iOS.</p>
<br/>
<h3>
Capturing Tab Key
</h3>
<textarea id="textarea" rows="5" cols="30"></textarea>
<p>On desktop/laptop, when you hit a tab now, it will insert a tab into the input and will add a "log" to the space below indicating a tab key was pressed. On iOS, it doesn't recognize the tab key, but recognizes every other tab key.</p>
<br/>
<ul id="log">
</ul>

CSS

p{padding:10px;}
textarea{float:left;margin-right:5px;}
br{clear:both;}
ul{margin-left:10px;}

JavaScript

$("#textarea").on('keydown',function(e){
	if(e.keyCode===9){
  	e.preventDefault();
  	$(this).val($(this).val()+"\t");
    $("#log").append("<li>Tab Pressed</li>");
  }
});

 $(document).keydown(function(e){ $("#log").append("<li>Key "+e.keyCode+" Pressed</li>");});