TextArea의 텍스트를 TextArea의 실제 영역으로 제한하십시오.

Question

TextArea에서 문자를 제한하는 것에 관해서 물어 본 대부분의 질문은 원하지 않습니다. TextArea html 요소의 편집 가능한 영역을 실제 텍스트 영역 자체로 제한하는 방법을 알고 싶습니다. 이것도 가능합니다.

예 :

내가 4 행 30 열 수있는 텍스트 영역을 말한다. 이 영역의 텍스트를 120 자로 제한 할 수는 있지만 사용자가 반환 5 번을 치지 않고 이미 설정 한 특정 영역을 지나치는 것을 막을 수는 없습니다. 스크롤바가 나타나기를 원하지 않습니다.

이 문제를 해결할 수있는 자바 스크립트가 있습니까? (120)

예 링크에

Answer 1

복사 텍스트 영역에 동일한 글꼴 스타일과 visibility: hidden DIV에 텍스트와 가자되지 않습니다 max-width 귀하의 컬럼 수 이상. 텍스트의 숨겨진 사본 높이가 한도를 초과하면 추가 된 텍스트를 제거하십시오.

다음은 입니다. 필요한 내용은입니다. 불행히도 5 행 (4 행에 엔터를 치면)에 아무 것도 입력 할 때까지 5 행을 남기지 않고 5 행에 몇 개의 문자를 남겨 둘 수 있습니다 (4 행에서 5 행으로 감싸는 경우) . 나는이 기법을 어떻게 더 구체화 할 지 불확실하다.

var $measure = $('#measure'); 
 
var $input = $('#input'); 
 
var $output = $('#measurement'); 
 

 
var existingText = ''; 
 
$input.on('keyup', function(event) { 
 
    $measure.html($input.val()); 
 
    $output.val($measure.width() + 'x' + $measure.height() + 'px'); 
 
    if ($measure.height() > 60) { 
 
     $input.val(existingText.trim()); 
 
     $measure.html(existingText.trim()); 
 
    } 
 
    existingText = $input.val(); 
 
});

#measure 
 
{ 
 
    position: absolute; 
 
    visibility: hidden; 
 
    height: auto; 
 
    width: auto; 
 
    white-space: pre-wrap; 
 
    
 
    /* set font style equal to style of textarea */ 
 
    font-family: monospace; 
 
    font-size: 13px; 
 
    letter-spacing: normal; 
 
    line-height: normal; 
 
    word-spacing: 0; 
 
    word-wrap: break-word; 
 
    max-width: 221px; 
 
    border: 1x solid black; 
 
    margin: 2px; 
 
    padding: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="input" cols="30" rows="4"></textarea> 
 
<div id="measure"></div> 
 
<br> 
 
<input type="text" disabled="disabled" id="measurement"/>

Answer 2

설정 최대 길이의 ATTR는 여기

http://www.w3schools.com/tags/att_textarea_maxlength.asp