SJ를 사용하여 텍스트 상자에 입력된 문자 수를 실시간으로 모니터링하는 방법

이번에는 SJ를 사용하여 텍스트 상자의 입력 문자 수를 실시간으로 모니터링하는 방법을 알려 드리겠습니다. SJ에서 텍스트 상자의 입력 문자 수를 실시간으로 모니터링하는 데 사용할 주의 사항은 무엇입니까? 시간입니다. 실제 사례를 살펴보겠습니다.

필수

필수: 텍스트 입력창의 단어 수를 실시간으로 모니터링하고 제한

1. 현재 입력 단어 수를 실시간으로 모니터링하고 onkeyup 이벤트 메소드를 직접 사용하고 입력 상자에 maxlength 속성을 추가하여 길이를 제한합니다. 예:

<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. 해결책: com

position

start 이벤트는 텍스트를 입력하기 전에 트리거됩니다(keydown 이벤트와 유사하지만 이 이벤트는 여러 개의 표시되는 문자를 입력하기 전에만 발생하며 이러한 표시되는 문자를 입력하려면 일련의 키보드가 필요할 수 있습니다) 작업, 음성 인식 또는 클릭 입력 방법 대체 단어). Compositionend는 텍스트 입력에 해당하는 이벤트입니다.

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

rreee

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;
  }
 }

데이터:

<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>

방법:

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

위 내용은 SJ를 사용하여 텍스트 상자에 입력된 문자 수를 실시간으로 모니터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!