JSFiddle - React, Tailwind, and code Playground

by scaillerie

HTML

<table>
    <tr>
        <td><input type="text" id="myInput" /></td>
    </tr>
</table>

<div id="copy"></div>

CSS

* {
    font-family: arial; 
    font-size: 1em;    
}

td {
    width : 50px;   
}

input {
    width: 100%;       
}

#copy
{
    display: none;
    position: absolute;
    height: auto;
    width: auto;
}

JavaScript

$("#myInput").on("keydown", function(e) {
    $("#copy").text(this.value + "_");

    var width = $("#copy").outerWidth();
    console.log("w: " + width);

    var code = e.keyCode ? e.keyCode : e.which;
    if (width > 50 && code  !== 8 && code !== 49) {
        return false;
    }
});