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

php中世界最好的语言
풀어 주다: 2018-04-13 11:57:46
원래의
1495명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!