textarea custom

by tripcollor

HTML

<div class="textarea-custom">
  <p contenteditable class="textarea-custom_field"></p>
  <span class="textarea-custom_placeholder">Причина доступа</span>
  <input type="text" name="" value="" class="textarea-custom_input">
</div>

SCSS

.textarea-custom{
  max-width: 390px;
  box-sizing: border-box;
  height: 200px;
  margin: 0 auto;
  position: relative;
  border-radius: 10px;
  border: 1px solid #8a8484;
  padding: 0 20px;
  display: table;
  &_field{
    font-size: 20px;
    color: #766a6a;
    margin: 0;
    display: table-cell;
    vertical-align: middle;
    white-space: normal;
    word-wrap: break-word;
    min-width: 350px;
    max-width: 350px;
    max-height: 200px;
    text-align: center;
  }
  &_placeholder{
    font-size: 20px;
    color: #766a6a;
    position: absolute;
    display: block;
    white-space: nowrap;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
  }
  &_input{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(100%);
    font-size: 20px;
  }
}

JavaScript

function customTextArea() {
  var textareaField = $('.textarea-custom_field');

  if (textareaField.val() != '') {
    $(this).parent().children('.textarea-custom_placeholder').hide();
  } else {

  }

  textareaField.focus(function() {
    var textareaPlaceholder = $(this).parent().children('.textarea-custom_placeholder');
    textareaPlaceholder.hide();
  });

  textareaField.focusout(function() {
    var textareainput = $(this).parent().children('.textarea-custom_input');
    if (textareainput.val() == 0) {
      var textareaPlaceholder = $(this).parent().children('.textarea-custom_placeholder');
      textareaPlaceholder.show();
    }

  });

  textareaField.on('input', function() {
    var textareainput = $(this).parent().children('.textarea-custom_input');
    textareainput.val(this.innerHTML.replace('<br>', ''));
  });
}
customTextArea();