텍스트 영역의 동적 남은 단어 수를 얻는 방법

이번에는 텍스트 영역의 동적 남은 단어 수를 가져오는 방법과 텍스트 영역의 동적 남은 단어 수를 가져오는 노트가 무엇인지 보여 드리겠습니다. 다음은 실제 사례입니다.

직장에서 한 번도 쓴 적이 없는 사례를 접했습니다. 오후 반나절 동안 글을 쓰려고 노력했는데, 기분이 묘하지만 성취감도 듭니다! 물론 이것은 js 전문가에게는 아무 것도 아니지만 내 자신의 js 능력을 위한 작은 진전입니다.

사례 소개: 일부 웹사이트에는 텍스트 영역 텍스트 상자가 있는 경우가 많습니다. 입력할 수 있는 단어 수 아래에 텍스트 프롬프트가 표시됩니다. 오늘은 이 기능을 구현해 보겠습니다. 물론 페이지에는 여러 개의 텍스트 영역이 있으므로 단일 js 로직을 제어에 사용할 수 없으며 작은 방식으로 캡슐화해야 합니다. 물론 내 패키지에는 여전히 몇 가지 결함이 있지만 기본 기능은 달성되었습니다.

먼저 단일 텍스트 영역 구현 사례를 소개합니다

html 부분:

<textarea id="text_txt1"></textarea>  
<span id ="num_txt1">剩余可输入600字</span>

js 부분:

$(function(){   
   $('#text_txt1').on('keyup',function(){   
       var txtval = $('#text_txt1').val().length;   
       console.log(txtval);   
      var str = parseInt(600-txtval);   
      console.log(str);   
        if(str > 0 ){   
          $('#num_txt1').html('剩余可输入'+str+'字');   
      }else{   
          $('#num_txt1').html('剩余可输入0字');   
          $('#text_txt1').val($('#text_txt1').val().substring(0,600)); //这里意思是当里面的文字小于等于0的时候，那么字数不能再增加，只能是600个字   
        }   
        //console.log($('#num_txt').html(str));   
    });   
})

그런 다음 같은 페이지에 여러 텍스트 영역 구현 사례를 소개합니다

function changeLength(obj,num){   
    obj.on('keyup',function(){   
    var txtval = obj.val().length;   
        //console.log(txtval);   
        var str = parseInt(600-txtval);   
        //console.log(str);   
        if(str > 0 ){   
            num.html('剩余可输入'+str+'字');   
        }else {   
            num.html('剩余可输入0字');   
            obj.val(obj.val().substring(0, 600));   
        }   
        //console.log($('#num_txt').html(str));   
    });   
}   
$(function(){ //我这里有四个，所以调用4次   
    changeLength($('#text_txt1'),$('#num_txt1'));   
    changeLength($('#text_txt2'),$('#num_txt2'));   
    changeLength($('#text_txt3'),$('#num_txt3'));   
    changeLength($('#text_txt4'),$('#num_txt4'));   
});

물론 여기에 필요한 실제 단어 수도 캡슐화할 수 있습니다. 함수 내부에 있지만 캡슐화하지는 않겠습니다. 이렇게 텍스트를 입력하면 스팬 안에 남은 단어수가 자동으로 표시됩니다. 입력값이 최대값에 도달하면 남은 단어수가 0으로 표시되며, 새로운 내용을 입력할 수 없습니다. 텍스트를 삭제할 때, 스팬은 남은 단어 수를 동적으로 얻을 수 있습니다.

다음은 다른 사람의 코드입니다. 이번에는 다른 사람의 작성 방법도 빌려왔습니다

html:

<div class="family_v2">  
    <p class="nickname_v2">简介：</p>  
     <textarea id="content" name="sign" style="height:60px;overflow-y: hidden;"  
     onkeyup="changeLength(this,60)" class="nicknameBox_v2 brief_box_v2">  
     </textarea>  
     <div class="limit_num_v2">  
         <h3>60</h3>  
    </div>  
 </div>

js:

//验证textarea的长度   
function changeLength(obj,lg){   
    var len = $(obj).val();   
    $(obj).next().find("h3").text(lg-len.length);   
    if(len.length>=lg){   
        $(obj).next().find("h3").text(0);   
        $(obj).val(len.substring(0,lg));   
    }   
}

이 사례를 읽고 나면 방법을 마스터했다고 믿습니다. PHP 중국어 웹사이트 기사의 다른 관련 주제에 주목하세요!

관련 자료:

HTML의 기본 지식. CSS 스타일 시트 및 스타일 속성에 대한 자세한 소개

HTML 메타 태그의 일반적인 사용법 소개

HTMLa 태그의 href 속성은 상대 항목을 지정합니다. 경로 및 절대 경로 사용 방법

위 내용은 텍스트 영역의 동적 남은 단어 수를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!