ホームページ >ウェブフロントエンド >jsチュートリアル >複数行のテキストボックスのjs実装、残りの単語数をカウントする関数のコード例
複数行のテキストボックスのjs実装、残りの単語数をカウントする関数のコード例
- 怪我咯オリジナル
- 2017-07-04 15:06:351314ブラウズ
この記事では主に複数行テキストボックス残り文字数カウント機能のjs実装に関する知識を紹介します。非常に良い基準値を持っています。以下のエディターで見てみましょう
レンダリング:
コードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js统计文本框剩余字数</title>
<style type="text/css">
#area{
width: 300px;
height: 300px;
resize:none;
}
</style>
</head>
<body>
<textarea autofocus id="area" onkeydown="sy()" maxlength="10" placeholder="只能输入十个字"></textarea>
<!--
resize:none 多行文本框不可以拖动
onkeypress="sy()"键盘按住或点击时调用方法
maxlength="10"定义最大宽度
placeholder="只能输入十个字" 定义默认提示
autofocus 定义自动获得焦点
-->
<span>你还可以输入:<strong id="span" >10</strong>个字</span>
<input type="button" value="统计" onclick="fun();">
<p id="p"></p>
<script type="text/javascript">
function sy() {
var num=document.getElementById("area").value.length;
//console.log(num);
var sheng=10-num;
if(sheng==0){
//变颜色为红色
console.log(sheng);
document.getElementById("span").style.color="#ff0000";
}else{
//变颜色为黑色
document.getElementById("span").style.color="#000000";
}
document.getElementById("span").innerHTML=sheng;
}
function fun(){
var txt=document.getElementById("area").value;
//这么写的意思是申请abc三个值都为0
var a=b=c=0;
for(var i=0;i<txt.length;i++){
var ch=txt.charAt(i);
if(ch>="a"&&ch<="z"){
a++;
}else if(ch>="A"&&ch<="Z"){
b++;
}else if(ch>="0"&&ch<="9"){
c++;
}
}
//abc中分别统计了小写字母、大写字母、数字的个数
document.getElementById("p").innerHTML="大写字母有"+b+"个，小写字母有"+a+"个，数字有"+c+"个";
}
</script>
</body>
</html>以上が複数行のテキストボックスのjs実装、残りの単語数をカウントする関数のコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。