JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" x-webkit-speech />

CSS

html,body{height:100%;width:100%;overflow:hidden;text-align:center;}
input[x-webkit-speech]{width:15px;border:0;font-size:20px;overflow:hidden;z-index:5;-webkit-transform:scale(8,8);cursor:pointer;}
input[x-webkit-speech],input[x-webkit-speech]:active,input[x-webkit-speech]:focus{outline:none;border:none;}

JavaScript

var oldVal=$('input[x-webkit-speech]').val();
$('input[x-webkit-speech]').css('line-height',$('body').height()+'px');

setInterval(function(){
    if($('input[x-webkit-speech]').val()!=oldVal){
        oldVal=$('input[x-webkit-speech]').val();
        $('input').blur();
        alert($('input[x-webkit-speech]').val());
    }
},100);