사례 소개 : 우리는 종종 Textarea 텍스트 상자가있는 일부 웹 사이트를 볼 수 있습니다. 입력하면 아래에 몇 단어를 입력 할 수있는 텍스트 프롬프트가 있습니다. 오늘은이 기능을 구현하는 것입니다. 물론, 페이지에 여러 텍스트가 있으므로 제어를 위해 단일 JS 로직을 사용할 수 없으므로 작은 방식으로 캡슐화되어야합니다. 물론 포장에는 여전히 약간의 단점이 있지만 기본 기능은 구현됩니다.
먼저 단일 텍스트 구현 사례를 소개하십시오
HTML 부분 :
<TextRea id = "text_txt1"> </textRea> <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') 0보다 같은 단어의 수를 늘릴 수 없으며 600 단어 일 수 있습니다} // console.log ($ ( '#num_txt'). html (str));});}).그런 다음 같은 페이지 아래에 여러 개의 텍스트 구현 사례를 소개합니다.
함수 changelength (obj, num) {obj.on ( 'keyup', function () {var txtVal = obj.val (). 길이; // console.log (txtVal); var str = parseint (600-txtval); // console.log (str); if (str> 0) {num.html ( '+str+'); {num.html ( '나머지 입력 0 Word'); 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')); c hangeLength ($ ( '#ort_txt3'), $ ( '#num_txt3')); changelgrength ($ ( '#text_txt4'), $ ( '#num_txt4');});물론 여기에서 필요한 단어 수는 함수 내부에서 캡슐화 될 수 있지만 캡슐화하지는 않습니다. 이것은 텍스트를 입력 할 때 나머지 단어가 스팬 내부에 자동으로 표시됨을 알고 있습니다. 입력 값이 가장 높은 값에 도달하면 나머지 단어는 0으로 표시되며 컨텐츠는 새 컨텐츠로 채울 수 없습니다. 텍스트를 삭제할 때 Span은 나머지 단어 수를 동적으로 얻을 수 있습니다.
아래는 다른 사람들의 코드이며 이번에는 다른 사람들의 글쓰기 방법 중 일부를 빌 렸습니다.
HTML :
<div> <p> 소개 : </p> <textRea id = "content"name = "sign"style = "Height : 60px; Overflow-Y : Hidden;"onkeyup = "Changelength (this, 60)"> </textArea> <div> <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));위는 편집자가 소개 한 JS를 기반으로 TextRea에서 동적 남은 단어를 얻는 방법입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!