[ input ] 댓글 입력시 입력값 카운팅

WHAT AM I GONNA DO

기능

• 텍스트 입력시 글자 카운팅 영역 앞으로 X버튼 노출
• 댓글 입력시 입력 값 카운팅
• 정리: @input, slice()

<div class="input_item">
  <input
    id="default"
    v-model="searchWorld"
    autocomplete="off"
    type="text"
    placeholder="내용을 입력해주세요"
    maxlength="100"
    @input="commentContent"
  >
  <div class="count_cancel_button">
    <button v-if="inputCheckYn" class="clean_all" @click="cancel" />
    <span>{{ customeString }}/100</span>
  </div>
</div>

//script
data(){
  return {
  //0부터 시작 
	customeString: 0,
  }
},
methods: {
	commentContent(e) {
    	const target = e.currentTarget
        const max = e.currentTarget.getAttribute('maxlength')
         if (target.value.length > max) {
        target.value = target.value.slice(0, max)
        }
        if (target.value.length === 0) {
          this.inputCheckYn = false
        } else {
          this.inputCheckYn = true
        }
        this.customeString = target.value.length
      }
}

[ 댓글 입력시 입력 값 카운팅 ]

@input v-bind를 통해 methods를 통해 값을 변경해주는 작업을 해보았다.
<input 태그>에 maxLength="100"으로 설정하여 max변수에 넣어주었고 target(현재 입력하는값)이 100이상인 경우에는 .slice()를 사용했다. this.customeString = traget.value.length를 넣어주어서

  <span>{{ customeString }}/100</span>

바인딩해주면 값이 실시간으로 변하는것을 볼 수 있다.

[ 값이 counting되면서 생기는 오류 ]

[ 오류현상 ]
입력시 1 -> 10단위 -> 100으로 값이 변경될때 counting 부분이 input태그 밖으로
나가게 되어 화면이 움직이는(?) 상황

[ 오류원인 ]

• position:relative; left:880px;로 간격을 주어 입력시 오른쪽으로 밀리게 되는 현상

.input_item {
  position: relative;
}
.input-item .count_cancel_button{
	display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 10px;
}
.input_item .clean_all {
  width: 18px;
  height: 18px;
  padding-right: 30px;
  background: url('/welstory/images/search//delete_all.svg')!important;
  background-size: 100% 100%!important;
}

[ 해결 ]

• count_cancel_button div클래스를 추가
• flex로 감싸고 positio:absoulte; right:10px;를 주어 오른쪽으로 고정해서 움직이는 상황을 해결하였다.