JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div class="formed-ctrl">
  <input class="formed-ctrl__input" type="text">
  <div class="formed-ctrl__faker">Иванов Иван Иванович</div>
  <div class="formed-ctrl__errors"></div>
</div>

SCSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  padding: 1rem;
  font-family: sans-serif;
}

input {
  font-family: sans-serif;
}

.formed-ctrl {
  position: relative;
  background-color: #fff;
  display: inline-block;
  vertical-align: top;
  width: 520px;
}

.formed-ctrl__input {
  width: 100%;
  padding: 0.4rem 1rem;
  font-weight: 500;
  font-size: 1rem;
  background-color: transparent;
  border: 2px solid #ccc;
  border-radius: 4px;
  outline: none;
  margin: 0;
  height: 42px;
}

.formed-ctrl__faker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  padding: 0.4rem 1rem;
  letter-spacing: 0;
  font-weight: 500;
  border: 2px solid transparent;
  padding-top: 0.7rem;
  color: #6a6a6b;
  pointer-events: none;
}

.faker-value {
  opacity: 0;
}

JavaScript

function placeHoldIt(target) {
	let input = null;
  let fake = null;
  let keyCode = null;
  let phParts = [];

	function setSelectRange(input, selectionStart, selectionEnd) {
  	if (input.setSelectionRange) {
      input.focus();
      input.setSelectionRange(selectionStart, selectionEnd);
    } else if (input.createTextRange) {
      let range = input.createTextRange();
      
      range.collapse(true);
      range.moveEnd('character', selectionEnd);
      range.moveStart('character', selectionStart);
      range.select();
    }
  }
  
  function setCaretPos(input, pos) {
     setSelectRange(input, pos, pos);
  }
}

// https://www.endyourif.com/set-cursor-position-of-textarea-with-javascript/
function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos(input, pos) {
   setSelectionRange(input, pos, pos);
}

function setFaker(value, $faker) {
  var splitted = value.split(' ');
  
  switch(splitted.length) {
    case 1:
      if (splitted[0].length === 0) {
        $faker.html('Иванов Иван Иванович');
      } else {
        $faker.html('<span class="faker-value">' + value + '</span> ' + fioPlaceHolders[1] + ' ' + fioPlaceHolders[2]);
      }
    break;
    case 2:
      if (splitted[1]) {
        $faker.html('<span class="faker-value">' + value + '</span> ' + fioPlaceHolders[2]);
      } else {
        $faker.html('<span class="faker-value">' + value + '</span> ' + fioPlaceHolders[1] + ' ' + fioPlaceHolders[2]);
      }
    break;
    case 3:
      if (splitted[2].length === 0) {
        $faker.html('<span class="faker-value">' + value + '</span> ' + fioPlaceHolders[2]);
      } else {
       ...