이번에는 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
positionstart 이벤트는 텍스트를 입력하기 전에 트리거됩니다(keydown 이벤트와 유사하지만 이 이벤트는 여러 개의 표시되는 문자를 입력하기 전에만 발생하며 이러한 표시되는 문자를 입력하려면 일련의 키보드가 필요할 수 있습니다) 작업, 음성 인식 또는 클릭 입력 방법 대체 단어). Compositionend는 텍스트 입력에 해당하는 이벤트입니다.
이 두 속성은 "스위치"와 다소 유사합니다. 예를 들어 중국어 병음 입력이 시작되면 스위치가 켜지고 전체 텍스트 또는 텍스트 문자열이 입력된 후에는 모니터링되는 길이 값이 더 이상 변경되지 않습니다. , 스위치가 꺼지고 모니터링된 값 길이가 얻어집니다.
rreeevue에 쓰기:
템플릿: 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,
추천 도서:
위 내용은 SJ를 사용하여 텍스트 상자에 입력된 문자 수를 실시간으로 모니터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!