jQuery가 텍스트 상자의 단어 수를 계산하고 텍스트 상자의 단어 수를 제한하는 방법

jQuery가 텍스트 상자의 단어 수를 계산하고 텍스트 상자의 단어 수를 제한하는 방법_jquery

WBOY

풀어 주다： 2016-05-16 15:12:51

원래의

1226명이 탐색했습니다.

한자는 2로, 영어의 기호나 숫자는 1로 계산됩니다. (140단어를 지정한 경우 2를 곱하면 280이 됩니다.) 사용자에게 표시되는 단어 수를 복원하려면 결국 2로 나누어야 하기 때문에 Math.ceil 메서드를 사용해야 합니다.

$(function(){ 
var $tex = $(".tex"); 
var $but = $(".but"); 
var ie = jQuery.support.htmlSerialize; 
var str = 0; 
var abcnum = 0; 
var maxNum = 280; 
var texts= 0; 
var num = 0; 
var sets = null; 
$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"}); 
} 
} 
//按钮点击 
$but.click(function(){ 
if($(this).is(".grey")){ 
sets = setInterval(flash,100); 
$tex.addClass("textColor") 
} 
function flash(){ 
num++; 
if(num == 4){ 
clearInterval(sets); 
} 
if(num%2 == 1){ 
$tex.addClass("textColor") 
}else{ 
$tex.removeClass("textColor") 
} 
} 
}) 
})

로그인 후 복사

1. 기능:

사용자가 입력하는 동안 계산이 수행되어 입력할 단어 수를 사용자에게 알려줍니다.

지정된 단어 수를 초과한 경우 확인을 클릭하면 입력 상자가 깜박입니다

2. 기능 분석

어떤 이벤트가 핵심인가요?

표준 브라우저는 oninput을 사용하는 반면 IE는 onpropertychange를 사용합니다. 이 두 이벤트가 발생하는 조건은 텍스트 상자의 값이 변경된다는 것입니다.

단어수 계산.

플래시 배경색

여기서 모듈식 연산을 사용하는 이유는 처음에는 색상이 있고 두 번째에는 색상이 없기 때문입니다. 이런 방식으로 반복되는 작업에는 깜박이는 효과가 있습니다.

이번에는 육안으로 색상과 무색 효과를 보아야 하기 때문에 여기서는 작업을 반복해야 하므로 Delay, setTimeout, setInterval이 필요합니다.

다음 코드는 jQuery를 사용하여 입력 단어 수를 제한하는 텍스트 상자를 구현하는 방법을 소개합니다.

1. 외부 .js 파일 가져오기:

<script src="http://static.l99.com/js/jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>

로그인 후 복사

2. 태그에 다음 코드를 추가합니다.

<body>
还可以输入<span id="word">140</span>个字<br />
<textarea id="txt" name="" cols="" rows=""></textarea>
<script language="javascript" type="text/javascript">
$("#txt").keyup(function(){ 
if($("#txt").val().length > 140){
$("#txt").val( $("#txt").val().substring(0,140) );
}
$("#word").text( 140 - $("#txt").val().length ) ;
});
</script>
</body>

로그인 후 복사

3. 페이지가 로드될 때 입력 상자에 기본 텍스트가 있는 경우 페이지가 로드될 때 다음 jQuery 코드를 실행해야 올바르게 표시됩니다.

$("#word").text( 140 - $("#txt").val().length ) ;

로그인 후 복사