텍스트 영역 문자 countDown

Question

나는 h : inputTextArea를 가지고 있으며, 문자 위에 왼쪽으로 표시된 작은 레이블을 추가하고 싶습니다. 새 문자를 입력하면 400에서 0으로 카운트 다운됩니다. 나는 내 h : inputTextArea에이 기능을 어떻게 추가 할 수 있을지 전혀 모른다. 그것을 위해 자바 스크립트가 약간 필요합니까 (이 기능은 페이지를 새로 고쳐서는 안됩니다)?

권장 사항은 무엇입니까?

이미 존재하는 유효성 검사기는 어떻게 될 수 있습니까?

<h:inputTextarea id="offerDescription" value="#{newOfferSupportController.offerDescription}" validator="#{newOfferSupportController.validateDescription} "/> 

Answer 1

<textarea> 카운트 다운 효과의 복잡함은 브라우저가 <textarea> 요소 값을보고하는 길이가 거의 믿을 수 없을 정도로 양식에서 서버로 다시 보낼 문자열의 실제 길이가 아니라는 사실에서 유래합니다 게시됩니다.

Here은 문제를 나타내는 jsfiddle입니다. <textarea>에 일부 문자를 입력하면 페이지의 스크립트가 필드 값의 현재 길이로 카운터를 업데이트합니다. 2 ~ 3 자 사이에 "Enter"를 누르십시오. 보고 된 길이에 유의하십시오. (문제가 명시 적 개행과 관련되어 있으므로 "Enter"키를 누르는 것이 중요합니다.)

"이동"을 클릭하면 서버가 HTTP 요청 내용으로 응답합니다. "b"(양식의 <textarea>의 이름) 값의 크기를 센다. 특히 개행 문자는 2 문자 시퀀스로 전송됩니다. 그러나 브라우저는 삽입 된 개행 문자를 단일 문자로 계산합니다. 따라서 각각의 삽입 된 명시 적 개행은보고 된 길이를 실제로 제출되는 길이보다 1 작게 만듭니다.

HTTP 요청 본문에서 매개 변수를 추출 할 때 서버에서 어떤 일이 발생하는지에 따라 그 불일치가 중요 할 수 있습니다. 일부 서버 측 환경에서 CR-LF 쌍을 일반 LF 문자로 접을 수 있으므로 양식 제출 전에 브라우저에서보고 한 내용과 일치하는 효과적인 문자열 길이를 얻을 수 있습니다. 그러나, 내 경험에, 그것은 automaticaly 일어나지 않으며, 실제로 당신은 어쨌든 그 행동을 정말로 원하지 않을 수도 있습니다. 어쨌든 서버는 저장하기 전에 길이를 검사 할 것이고, 궁극적 인 목적지가 최대 길이를 갖는 텍스트 열일 경우 적어도 데이터베이스 서버가 될 것입니다. 그러나 페이지의 유효성 검사 코드가 OK 상황 만보고하는 것은 나쁜 형식입니다. 서버에서 돌아 오는 불쾌한 오류로 인해 모순되는 내용입니다.

카운터를 제공하는 많은 상용 JavaScript 도구는이 동작을 고려하지 않습니다.

Answer 2

찾고있는 것을 수행하는 일부 JavaScript의 경우 Count characters in textarea을보십시오.

Answer 3

jQuery plugin이 있으며 쉽게 사용할 수 있습니다. 그리고 아주 쉽게 원하는 것을 수행하는 here is another plugin입니다.

Answer 4

JSF의 ajax 지원을 사용하여 사용자가 무언가를 입력 할 때마다 카운트 다운 메시지를 다시 렌더링 할 수 있습니다. 다시 렌더링하는 컨트롤은 단순히 메시지의 크기를 계산하여 표시합니다. Javascript 솔루션이 더 효율적일 수 있지만이 방법은 브라우저 간 조잡함을 피할 수 있습니다.

<h:inputTextarea id="tweet" style="width: 400px;" value="#{yourPageBean.tweet}"> 
    <f:ajax event="keydown" render="charactersRemaining"/> 
    <f:ajax event="keyup" render="charactersRemaining"/> 
</h:inputTextarea> 
<h:outputText id="charactersRemaining" value="#{yourPageBean.charactersRemaining}"/> characters left