[Javasciprt] 말머리 붙히기

타이틀 앞에 말머리 붙히는 태그이다.

<input class="checkBoxType" type="checkbox" data-value="[말머리1]" value="man" />
<input class="checkBoxType" type="checkbox" data-value="[말머리2]" value="woman"" />
<input id="titleInput" type="text" />

const InputTitleFirstText = (function() {
  return {
    init: function() {
      this.$checkBox = document.getElementsByClassName('checkBoxType') || null;
      this.$titleInput = document.getElementById('titleInput') || null;
      this.isType = false;
      this.commonLen = 6;

      this.CheckBoxFunc();
      this.TitleInputFunc();
    },

    CheckBoxFunc: function() {
      let $checkBox = this.$checkBox;
      let $titleInput = this.$titleInput;
      let isType = this.isType;

      for (var i = 0; i < $checkBox.length; i++) {
        $checkBox[i].addEventListener('click', function() {
          var originText = $titleInput.value;
          isType = this.dataset.value;
          if (this.checked) {
            originText = isType + originText;
          } else {
            isType = false;
            originText = originText.replace(isType, '');
          }
          titleInput.value = originText;
        });
      }
    },

    TitleInputFunc: function() {
      let commonLen = this.commonLen;
      let $titleInput = this.$titleInput;

      $titleInput.addEventListener('input', function(event) {
        if (isType) {
          if (this.value.length > commonLen && this.value.substring(0, commonLen) !== isType) {
            let convertType = this.value.substring(0, commonLen + 1)
              , convertTitle = this.value.replace(convertType, '');

            this.value = isType + convertTitle;
            return;
          }

          if (this.value.length < commonLen || this.value === isType) {
            this.value = isType;
          }
        }
      })
    }
  }
})();

InputTitleFirstText.init();