Input floating unit

by Snj

HTML

<div class="div-distance-left">
  <input type="text" class="input-field w-input" id="id_floorarea" placeholder="Nearest">
  <div class="unit-info">
  </div>
</div>

CSS

* { box-sizing: border-box; font-family: proxima_nova_rgregular, sans-serif; }
@font-face {
	font-family: 'proxima_nova_rgregular';
	src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot');
	src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
		   url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.woff') format('woff'),
		   url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.ttf') format('truetype'),
		   url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {
  background: #565656;
}

.input-field {
  font-size: 18px;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  border-color: rgb(188, 183, 181);
  color: rgb(58, 62, 68);
  background-color: rgb(219, 217, 216);
  margin-right: 0;
  margin-bottom: 0;
  padding: 7px 16px;
  justify-content: space-between;
  transition: border 350ms ease, box-shadow 350ms ease, border-radius 300ms ease;
}
.input-field:focus {
    border-color: rgb(241, 58, 44);
    background-color: rgb(219, 217, 216);
    box-shadow: rgba(15, 15, 15, 0.14) 0px 9px 22px 6px;
}
.w-input:focus, .w-select:focus {
    border-color: #3898ec;
    outline: 0;
}

.w-input, .w-select {
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
}

.div-distance-left {
  margin: 5rem;
  display: block-inline;
}

.unit-info {
  --margin-before: 0rem 0rem 0rem 0rem;
  --animation-fade: inputHighlighter 1.3s forwards;
  visibility: hidden;
  display: contents;
  pointer-events: none
}

.unit-info::before {
  content: "Kvm";
  border-left: 1px dotted rgba(0, 0, 0, 0.5);
  padding-left: 5px;
  line-height: 1.5rem;
  display: inline-block;
  opacity: 0.0;
  margin: var(--margin-before);
  font-size: 14px;
  transition: 0.2s ease margin; 
  -moz-transition: 0.2s ease margin; 
 ...

JavaScript

const getTextWidth = (input_element) => {
		let txtWidth;
		var fontsize = window.getComputedStyle(input_element).getPropertyValue("font-size");
		var fontfam = window.getComputedStyle(input_element).getPropertyValue("font-family");
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var ctx = canvas.getContext("2d");
    ctx.font = `${fontsize} ${fontfam}`;
    input_element.value.length == 0
    	? txtWidth = ctx.measureText(input_element.placeholder).width
    	: txtWidth = ctx.measureText(input_element.value).width;
    return txtWidth;
}

window.addEventListener("resize", () => {
  var inputBox = document.querySelector('#id_floorarea');
  var unitField = inputBox.nextElementSibling;
  var paddingLeft = `${inputBox.offsetWidth-16}`;
  unitField.style.setProperty("--animation-fade", "none");
	unitField.style.setProperty("--margin-before", `0rem 0rem 0rem -${paddingLeft-getTextWidth(inputBox)}px`);
  setTimeout(() => { unitField.style.setProperty("--animation-fade", "inputHighlighter 0.1s forwards"); }, 500);

});


$((_) => {
  var inputBox = document.querySelector('#id_floorarea');
  var unitField = inputBox.nextElementSibling;
  var paddingLeft = `${inputBox.offsetWidth-16}`;
  if (inputBox.value.length == 0) {
		unitField.style.setProperty("--margin-before", `0rem 0rem 0rem -${paddingLeft-getTextWidth(inputBox)}px`);
    setTimeout(() => { unitField.style.setProperty("visibility", "visible"); }, 200);
  }
});

document.querySelector('#id_floorarea').onkeyup = (e) => {
  unitInfo = e.target.nextElementSibling;
  var paddingLeft = `${e.currentTarget.offsetWidth-16}`;
  unitInfo.style.setProperty("--margin-before", `0rem 0rem 0rem -${e.currentTarget.offsetWidth-getTextWidth(e.currentTarget)-16}px`);
}