단어 수 알림_양식 특수 효과의 실시간 계산을 위한 js 텍스트 상자-JS 튜토리얼-php.cn

단어 수 알림_양식 특수 효과의 실시간 계산을 위한 js 텍스트 상자

WBOY

풀어 주다： 2016-05-16 18:23:34

원래의

1422명이 탐색했습니다.

자바스크립트로 구현해야겠다는 생각을 잠시 하다가 오늘 만들었습니다. 원리는 매우 간단합니다. 텍스트 상자에 의해 트리거된 onkeyup 이벤트를 기반으로 현재 텍스트 상자의 문자 길이를 가져온 다음 텍스트 상자에 허용되는 최대 문자 수에서 현재 문자 수를 빼고 표시합니다. 라벨 컨트롤을 사용하세요.
렌더링:
단어 수 알림_양식 특수 효과의 실시간 계산을 위한 js 텍스트 상자
데모 코드:

<title>들어가세요</title>

<center>
<div style="text-align:left;">
<h3>
</h3>닉네임:<input type="text" id="mytext1" maxlength="15" onkeyup="keypress1()">
<font color="gray">
<label id="name"></label>최대 15자까지 입력 가능합니다</font><h3>

</h3>댓글 내용:<br><textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden" onkeyup="keypress2()" onblur="keypress2()">
<font color="gray">
<label id="pinglun"></label>최대 300자까지 입력 가능합니다</font><div>

<br><input onclick="runEx('runcode66343')" type="button" value="运行代码"><input onclick="doCopy('runcode66343')" type="button" value="复制代码"> <input onclick="doSave(runcode66343)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A 모두 선택 참고: </a>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 </div>]<script language="javascript"> 
function keypress1() //text输入长度处理 
{ 
var text1=document.getElementById("mytext1").value; 
var len=15-text1.length; 
var show="你还可以输入"+len+"个字"; 
document.getElementById("name").innerText=show; 
} 
function keypress2() //textarea输入长度处理 
{ 
var text1=document.getElementById("myarea").value; 
var len;//记录剩余字符串的长度 
if(text1.length>=300)//textarea控件不能用maxlength属性，就通过这样显示输入字符数了 
{ 
document.getElementById("myarea").value=text1.substr(0,300); 
len=0; 
} 
else 
{ 
len=300-text1.length; 
} 
var show="你还可以输入"+len+"个字"; 
document.getElementById("pinglun").innerText=show; 
}

</script>