텍스트 영역 크기 조정 끄기


117

내 사이트에서 텍스트 영역 크기 조정을 끄려고합니다. 지금은이 방법을 사용하고 있습니다.

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

내 방법이 올바르지 않고 JavaScript에서 더 나은 방법을 찾고 있다는 것을 알고 있습니다. 저는 초보자이므로 저에게 가장 적합한 솔루션은 HTML5 또는 jQuery입니다.

답변:


253

이 CSS를 사용하여 크기 조정을 비활성화하십시오.

모든 텍스트 영역의 크기 조정을 비활성화하는 CSS는 다음과 같습니다.

textarea {
    resize: none;
}

대신 이름으로 단일 텍스트 영역에 할당 할 수 있습니다 (텍스트 영역 HTML은).

textarea[name=foo] {
    resize: none;
}

또는 id로 (텍스트 영역 HTML은) :

#foo {
    resize: none;
}

출처 : http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/


7
솔루션에 연결하는 대신 여기에서 약간 설명해야합니다. 앞으로이 질문을 보는 다른 많은 사람들은 답을 얻기 위해 링크를 클릭하지 않아도됩니다. 여기에 세부 정보를 추가하면 답변을 +1하겠습니다.
Jon Egeland 2012

21

이것은 당신의 일을 할 것입니다

  textarea{
        resize:none;
    }

여기에 이미지 설명 입력


8

CSS3는이 문제를 해결할 수 있습니다. 안타깝게도 오늘날 사용되는 브라우저의 60 % 에서만 지원됩니다 .

IE 및 iOS 용 당신은 크기를 조정 해제 할 수 없습니다하지만 당신은 제한 할 수 textarea의 설정에 의해 차원을 width하고 height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

데모보기


2

html draggable 속성을 사용하여 쉽게 할 수 있습니다.

<textarea name="mytextarea" draggable="false"></textarea>

기본값은 true입니다.


2
문제는 드래그 앤 드롭이 아니라 텍스트 영역의 크기를 조정하는 것입니다. 따라서 예상대로 텍스트 영역에이 속성을 설정하는 것은 Chrome에서 트릭을 수행하지 않습니다 (적어도).
peveuve

2

하나의 추가 옵션으로, 애플리케이션의 모든 텍스트 영역에 대한 기본 동작을 되돌리려면 CSS에 다음을 추가 할 수 있습니다.

textarea:not([resize="true"]) {
  resize: none !important;
}

크기를 조정할 위치를 활성화하려면 다음을 수행하십시오.

<textarea resize="true"></textarea>

이 솔루션은 지원하려는 모든 브라우저에서 작동하지 않을 수 있습니다. resize여기 에서 지원 목록을 확인할 수 있습니다 . http://caniuse.com/#feat=css-resize


1

질문에 따라 javascript에 답변을 나열했습니다.

TagName을 선택하여

document.getElementsByTagName('textarea')[0].style.resize = "none";

아이디를 선택하여

document.getElementById('textArea').style.resize = "none";

0
//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

위의 코드는 대부분의 브라우저에서 작동합니다.

//HTML:
<textarea id='textarea' draggable='false'></textarea>

최대 브라우저 수에서 작동하도록 두 가지를 모두 수행하십시오.


0

이것은 나를 위해 작동합니다

<textarea
  type='text'
  style="resize: none"
>
Some text
</textarea>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.