SJ를 사용하여 텍스트 상자에 입력된 문자 수를 실시간으로 모니터링하는 방법-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-04-13 11:57:46

원래의

1522명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!