count text number

by uto usui

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<h1 class="h1">count text number</h1>

<div class="wrap">
  <div class="inner">
    <textarea class="textarea js-textarea" name="" id=""></textarea>
    <p class="length js-length"><strong></strong>／2000文字</p>
  </div>
</div>

SCSS

body {
	width: 100%;
  min-height: 100vh;
	padding-bottom: 50px;
  background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%);
}

.h1 {
  margin: 1.4em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  display: block;
}

.textarea {
  width: 300px;
  height: 200px;
  padding: .6em;
  line-height: 1.6;
  background-color: rgba(white,.65);
  border: 0;
  font-size: 16px;
  color: rgba(black,.6);
  resize: vertical;
}

.length {
  text-align: right;
}

JavaScript

var textareaLength = function () {
  $('.js-textarea').on('keydown keyup keypress change',function(){
    var length = $(this).val().length;
    $(this).next('.js-length').find('strong').html(length);
  });
}
textareaLength();



WebFontConfig = {
    google: { families: [ 'Dancing+Script:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();