텍스트박스 입력단어수 실시간 모니터링에 대한 자세한 설명

이 글은 텍스트 상자에 입력된 단어 수를 실시간으로 모니터링하기 위한 예제 코드를 주로 공유합니다. 참고할만한 가치가 있어 모든 분들께 도움이 되길 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

요구 사항: 텍스트 입력 상자의 단어 수를 실시간으로 모니터링하고 제한합니다.

1. 현재 입력되는 단어 수를 실시간으로 모니터링하고, onkeyup 이벤트 방식을 직접 사용하고, 최대 길이를 추가합니다. 길이를 제한하려면 입력 상자에 속성을 지정하세요. 예:

<p>
  <textarea id="txt" maxlength="10"></textarea>
  <p><span id="txtNum">0</span>/10</p>
 </p>

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 txt.addEventListener("keyup", function(){
  txtNum.textContent = txt.value.length;
 })

이제 기본 모니터링 기능이 완료될 수 있습니다. 기존 문제는 영어를 입력할 때는 정상이지만 중국어를 입력할 때는 병음 길이에 따라 모니터링되는 숫자가 변경된다는 것입니다.

2. 해결 방법:

compositionstart 이벤트는 텍스트를 입력하기 전에 트리거됩니다(keydown 이벤트와 유사하지만 이 이벤트는 표시되는 여러 문자를 입력하기 전에만 발생하며 이러한 표시되는 문자를 입력하려면 필요할 수 있습니다. 일련의 키보드 조작, 음성 대체 입력 방법을 식별하거나 클릭합니다.

compositionend는 텍스트 입력에 해당하는 이벤트입니다.

이 두 속성은 "스위치"와 다소 유사합니다. 예를 들어 중국어 병음 입력을 시작하면 스위치가 켜지고 전체 텍스트 또는 텍스트 문자열이 입력된 후에는 모니터링되는 길이 값이 더 이상 변경되지 않습니다. 입력하면 스위치가 꺼지고 모니터링된 값이 얻어집니다. vue에서

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 var sw = false;  //定义关闭的开关
 txt.addEventListener("keyup", function(){
  if(sw == false){
   countTxt();
  }
 });
 txt.addEventListener("compositionstart", function(){
  sw = true;
 });
 txt.addEventListener("compositionend", function(){
  sw = false;
  countTxt();
 });
 function countTxt(){  //计数函数
  if(sw == false){  //只有开关关闭时，才赋值
   txtNum.textContent = txt.value.length;
  }
 }

작성 방법:

template:

<textarea name="suggestions-text" id="textarea" cols="30" rows="10" maxlength="300" v-on:keyup="write()" v-on:compositionstart="importStart()" v-on:compositionend="importEnd()" v-model="textContent"></textarea>
<p class="counterNum">{{conterNum}}/300</p>

data:

textContent: '',
conterNum: 0,
chnIpt: false,

methods:

write() {
 let self = this;
 if (self.chnIpt == false) {
  self.conterNum = self.textContent.length;
 }
},
importStart() {
 this.chnIpt = true;
},
importEnd() {
 this.chnIpt = false;
 this.write();
}

관련 권장 사항:

HTML5 중국어 텍스트 상자 입력으로 콘텐츠 프롬프트 제거

입력 텍스트 상자 입력 금지 구현 속성

js 다양한 유효성 검사 텍스트 상자 입력 형식(정규 표현식)_form 특수 효과

위 내용은 텍스트박스 입력단어수 실시간 모니터링에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!