ホームページ >ウェブフロントエンド >jsチュートリアル >テキストボックス入力テキスト数制限のjs実装 code_javascriptスキル
テキストボックス入力テキスト数制限のjs実装 code_javascriptスキル
- WBOYオリジナル
- 2016-05-16 15:23:471469ブラウズ
通常、テキスト ボックスに入力できる単語の数は無制限ではありません。たとえば、よりユーザー フレンドリーな Web サイトでは、入力できる単語の数に制限が設けられている場合があります。残り 20 個の場合は、次のように入力できます。ヒントとして、例を使用してこの効果を実現する方法を紹介します。
まずレンダリングを見てください:
コードは次のとおりです:
<html>
<head>
<title>文本框输入文字倒计效果代码</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
.box
{
width:500px;
margin:10px auto;
}
p span
{
color:#069;
font-weight:bold;
}
textarea
{
width:300px;
}
.textColor
{
background-color:#0C9;
}
.grey
{
padding:5px;
color:#FFF;
background-color:#CCCCCC;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var $tex=$(".tex");
var $but=$(".but");
var ie=jQuery.support.htmlSerialize;
var str=0;
var abcnum=0;
var maxNum=280;
var texts=0;
$tex.val("");
$tex.focus(function(){
if($tex.val()=="")
{
$("p").html("您还可以输入的字数<span>140</span>");
}
})
$tex.blur(function(){
if($tex.val() == "")
{
$("p").html("请在下面输入您的文字：");
}
})
if(ie)
{
$tex[0].oninput = changeNum;
}
else
{
$tex[0].onpropertychange = changeNum;
}
function changeNum()
{
//汉字的个数
str=($tex.val().replace(/\w/g,"")).length;
//非汉字的个数
abcnum=$tex.val().length-str;
total=str*2+abcnum;
if(str*2+abcnum<maxNum||str*2+abcnum==maxNum)
{
$but.removeClass()
$but.addClass("but");
texts=Math.ceil((maxNum-(str*2+abcnum))/2);
$("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"});
}
else if(str*2+abcnum>maxNum)
{
$but.removeClass("")
$but.addClass("grey");
texts =Math.ceil(((str*2+abcnum)-maxNum)/2);
$("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"});
}
}
})
</script>
</head>
<body>
<div class="box">
<p>请在下面输入您的文字：</p>
<textarea name="weibao" class="tex" cols="" rows="8"></textarea>
</div>
</body>
</html>
この記事が、JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。