jquery에서 단어 수를 제어하는 방법-JS 튜토리얼-php.cn

jquery에서 단어 수를 제어하는 방법

藏色散人

풀어 주다： 2021-11-11 10:15:14

원래의

1661명이 탐색했습니다.

jquery에서 단어 수를 제어하는 방법: 1. 외부 js 파일을 가져옵니다. 2.

jquery에서 단어 수를 제어하는 방법

이 문서의 운영 환경: Windows 7 시스템, jquery 버전 1.2.6, DELL G3 컴퓨터

수를 제어하는 방법 jquery의 단어?

jQuery는 텍스트 상자의 단어 수를 계산하여 제한합니다. 텍스트 상자의 문자 수에 대한 방법

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

jquery에서 단어 수를 제어하는 방법

$(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를 사용합니다.

단어 개수 계산

영어로 된 기호나 숫자는 1개로 계산됩니다(140개 단어인 경우 2를 곱해야 하기 때문에 Math를 사용해야 합니다). 결국 사용자에게 표시되는 단어 수를 복원하려면 2로 나누어야 합니다.

깜박이는 배경색

여기서는 모듈식 작업이 사용됩니다.

이번에는 육안으로 색상과 무색 효과를 확인해야 하기 때문에 여기에서는 반복이 필요하므로 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 ) ;

로그인 후 복사

권장 학습: "jquery 비디오 튜토리얼 "

위 내용은 jquery에서 단어 수를 제어하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery에서 단어 수를 제어하는 ​​방법

jquery에서 단어 수를 제어하는 방법