JSFiddle - React, Tailwind, and code Playground

HTML

<input id="bta"><br><br>
<div contenteditable="true" id="ta" cols="10" rows="2">This is my starter text</div><br><br>
<input id="ata">

JavaScript

$(function() {
    var $ata = $('#ata'),
        $bta = $('#bta'),
        $ta = $('#ta');
    
    $ta.bind('keyup', function(e) {
        if (this.selectionStart === 0 && e.keyCode === 38) {
            $bta.val('Going up!').focus();
            $ata.val('');
        } else if (this.selectionStart === this.value.length && e.keyCode === 40) {
            $ata.val('Going down!').focus();
            $bta.val('');
        }
    });
});