모든 내용에 맞게 텍스트 영역 크기 조정

Question

텍스트 영역의 크기를 가능한 한 정확하게 맞추려면 텍스트 영역의 크기를 조정하려고합니다. 이것은 꽤 잘 작동하지만 사용자가 너비를 작성하여 다음 줄에 텍스트를 "밀어"때 실패 할 것

function resizeTextarea(t) { 
a = t.value.split('\n'); 
b = 1; 
for (x = 0; x < a.length; x++) { 
    c = a[x].length; 
    if (c >= 75) b += Math.ceiling(c/75); 
    } 
b += a.length; 
t.rows = b; 
} 

: 여기에 내 현재의 노력입니다. (참고 : 여기에 사용 된 75는 내 텍스트 영역의 폭을 문자로 표현한 것입니다.)

[enter] [key]는 텍스트 영역을 텍스트의 끝에서 2 줄 뒤 치고, 다음 [ 키]를 누르면 예상 한 행으로 되돌아갑니다. 나는 아무 효과없이 C < = 1 일 경우 2로 설정하려고 시도했다. 이 것은 큰 문제는 아니지만 수정하는 것이 좋을 것입니다.

도움을 주시면 감사하겠습니다.

참고 :이 기능은 키를 누를 때 호출됩니다.

Answer 1

Math.ceiling()과 같은 메소드가 없으므로 코드가 실패합니다. 대신 Math.ceil()이라고합니다.

그 외에도 ...

함수 내의 모든 변수는 전역 변수입니다. 이것은 좋은 습관이 아닙니다. 항상 변수 선언에 var 키워드를 추가하여 변수를 해당 함수에 비공개로 설정해야합니다. 그렇지 않으면 실수로 일부 전역 변수를 수정하여 실제로 잘못된 요소가 발생할 수 있습니다. JSLint을 사용하여 코드에서 문제가 없는지 확인하십시오.

텍스트 영역의 너비를 함수에 하드 코딩하는 것도 좋지 않습니다. 이 방법을 사용하면 크기가 다른 텍스트 영역에 크기 조정 기능을 사용할 수 없습니다. 현재의 경우 텍스트 영역의 cols 속성에서 동적으로 폭을 읽는 것이 가장 좋습니다.

변수의 이름을 a, b, c보다 의미있는 이름으로 변경하면 가독성이 향상됩니다. 예를 들어

:

 
function resizeTextarea(textarea) { 
    var lines = textarea.value.split('\n'); 
    var width = textarea.cols; 
    var height = 1; 
    for (var i = 0; i < lines.length; i++) { 
    var linelength = lines[i].length; 
    if (linelength >= width) { 
     height += Math.ceil(linelength/width); 
    } 
    } 
    height += lines.length; 
    textarea.rows = height; 
} 

내가 SO Autosizing Textarea를 게시를 위해 당신은 또한 답변을 연구 제안, 삼부작에 의해 지적했다.