JavaScript 가 실현 하 는 시 나 웨 이 보 원 생태 입력 글자 수 즉시 검사 기능[호 환 IE6]

3709 단어 JavaScript글자 수
본 고 는 자 바스 크 립 트 가 실현 한 모방 시 나 웨 이 보 원 생태 입력 글자 수 실시 간 검사 기능 을 실례 로 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
텍스트 상자 에 문 자 를 입력 하면 서 입력 한 글자 수 를 검사 하 는 것 은 어렵 지 않 습 니 다.그러나 그 중에서 일부 함수 의 사용 방식 이 혼 란 스 러 워 서 전체 결 과 를 이리 저리 구 해 내지 못 하고 Bugs 도 쉽게 나 올 수 있 습 니 다.여 기 는 length 함 수 를 더 이상 사용 할 수 없습니다.이 물건 은 영문 으로 한 문 자 를 계산 하고 한자 도 한 문자 로 계산 하기 때 문 입 니 다.데이터 전달 형식 에 부합 되 지 않 습 니 다.OnChange 이 벤트 를 사용 할 수도 없습니다.이 이 벤트 는 커서 를 텍스트 상자 로 떠 나 야 실행 되 며,더욱 즉각 적 인 OnKeyUp 으로 바 꿔 야 합 니 다.
기본 목표
다음 그림 은 시 나 웨 이 보 를 모방 하여 어떠한 플러그 인 도 사용 하지 않 고 순수 자바 script 에 JQuery 가 없 는 글자 수 통 계 를 가 진 입력 상 자 를 완성 하고 글자 수 를 초과 하면 해당 하 는 힌트 를 줍 니 다.
영 어 는 반 글자 로 계산 하고,중국 어 는 겨우 한 글자 로 계산한다.

2.기본 구조
할 말 없어.주로 ID=test 에 문 자 를 알려 줍 니 다.글자 수 를 집계 하 는 곳 은 항상 변경 되 기 때문에 ID=wordLength 를 제시 해 야 합 니 다.그 다음 스 크 립 트 에 있 는 input Test 함수 와 텍스트 상자 의 onkeyup 이벤트 가 촉발 되 고 자신의 현재 값 을 전달 해 야 합 니 다.이와 함께 글자 수가 집 계 된 곳 이 시 나 웨 이 보 의 부분 과 비슷 한 이 유 는 시 나 웨 이 보 에 게 조지 아 글씨 체 를 사 용 했 기 때 문 이라는 점 을 주목 했다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>      </title>
</head>
<body>
<p id="test"></p>
<span><input type="text" onkeyup="inputTest(this.value)" placeholder="     " /></span><span id="wordLength" style="font-family:Georgia;">0/10</span>
</body>
</html>
3.핵심 스 크 립 트

<script>
//      
//           ，  length  ，       ，        
function getStrLength(str){
  //         
  var mylen=0;
  //       
  for(var i=0;i<str.length;i++){
    //       i    Unicode  0-128        ，       
    if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128){
      mylen++;
    }else{
      //       
      mylen+=2;
    }
  }
  return mylen;
}
//               
function inputTest(value){
  //  getStrLength               ，  getStrLength              ，     2，       
  //   /10  wordLength    ，/     ，             ，  Dreamwaver
  document.getElementById("wordLength").innerHTML=parseInt(getStrLength(value)/2)+"\/10";
  //    10  ，20   
  if(parseInt(getStrLength(value))>20){
    //           ，            ，  ，  HTML       
    document.getElementById("test").style.display="block";
    document.getElementById("test").innerHTML="  ，    10   ";
    document.getElementById("test").style.color="#ff0000";
  }
  else{
    //        
    document.getElementById("test").innerHTML="";
    document.getElementById("test").style.display="none";
  }
}
</script>
PS:기능 이 비슷 한 온라인 도구 2 가 지 를 추천 합 니 다.
온라인 글자 수 통계 도구:
http://tools.jb51.net/code/zishutongji
온라인 문자 통계 및 편집 도구:
http://tools.jb51.net/code/char_tongji
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
위 챗 애플 릿 스크롤 보기 용기 구현 방법
JavaScript 는 페이지 를 떠 나 기 전에 알림 기능 을 실현 합 니 다[jQuery 실현 방법 첨부]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage