JSFiddle - React, Tailwind, and code Playground

by philfreo

HTML

<input id="inpt" type="text" placeholder="Type in here" />
<div id="inpt-width"></div>
<br>
    
<div id="inpt2" contenteditable>or type in here</div>
<div id="inpt2-width"></div>
<br>
    
<span id="inpt3">some fixed text here</span>
<div id="inpt3-width"></div>
<br>
    
<div id="inpt4-width"></div>

JavaScript

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

$('#inpt, #inpt2, #inpt3').on('input', function() {
    $('#'+this.id+'-width').html($(this).textWidth() + 'px');
}).trigger('input');

$('#inpt4-width').html($.fn.textWidth('Pass string without element', '13px arial') + 'px');