textarea 의 크기 조정 가능 속성을 비활성화하고 싶습니다.
textarea 오른쪽 하단 모서리를 클릭하고 마우스를 끌어 textarea 의 크기를 조정할 수 있습니다. 이것을 비활성화하려면 어떻게 해야 합니까?
반응형
질문자 :user549757
textarea 요소의 크기 조정 동작을 비활성화합니다.
textarea { resize: none; } 일부(전부는 아님) textarea 대해 비활성화하려면 몇 가지 옵션이 있습니다 .
태그( <textarea class="textarea1"> ) class 속성을 사용할 수 있습니다.
.textarea1 { resize: none; } name 속성이 foo textarea 을 비활성화하려면(예: <textarea name="foo"></textarea> ):
textarea[name=foo] { resize: none; } id 속성을 사용하여(예: <textarea id="foo"></textarea> ):
#foo { resize: none; }W3C 페이지 에는 크기 조정 제한에 사용할 수 있는 값이 나열되어 있습니다. 없음, 둘 다, 가로, 세로 및 상속:
textarea { resize: vertical; /* user can resize vertically, but width is fixed */ }적절한 호환성 페이지 를 검토하여 현재 이 기능을 지원하는 브라우저를 확인하십시오. Jon Hulka가 언급했듯이 최대 너비, 최대 높이, 최소 너비 및 최소 높이를 사용하여 CSS에서 치수를 더 제한할 수 있습니다.
알아야 할 매우 중요한 사항:
이 속성은 overflow 속성이 대부분의 요소에 대한 기본값인 visible 이외의 속성이 아닌 한 아무 작업도 수행하지 않습니다. 따라서 일반적으로 이것을 사용하려면 overflow: scroll;
Sara Cope의 인용, http://css-tricks.com/almanac/properties/r/resize/
Donut
CSS에서 ...
textarea { resize: none; }Jeff Parker
두 가지를 찾았습니다.
첫 번째
textarea{resize: none}이것은 아직 출시되지 않은 CSS 3이며 Firefox 4(이상), Chrome 및 Safari와 호환됩니다.
또 다른 형식 기능은 overflow: auto 를 사용하여 dir 속성을 고려하여 오른쪽 스크롤 막대를 제거하는 것입니다.
코드 및 다양한 브라우저
기본 HTML
<!DOCTYPE html> <html> <head> </head> <body> <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea> </body> </html>일부 브라우저
- 인터넷 익스플로러 8
- 파이어폭스 17.0.1
- 크롬
Rami Jamleh
CSS 3에는 이를 가능하게 하는 UI 요소에 대한 새로운 속성이 있습니다. 속성은 크기 조정 속성 입니다. 따라서 스타일시트에 다음을 추가하여 모든 텍스트 영역 요소의 크기 조정을 비활성화합니다.
textarea { resize: none; }이것은 CSS 3 속성입니다. 브라우저 호환성을 보려면 호환성 차트를 사용하십시오.
개인적으로 텍스트 영역 요소에서 크기 조정을 비활성화하는 것은 매우 성가신 일입니다. 이것은 디자이너가 사용자의 클라이언트를 "중단"하려고 하는 상황 중 하나입니다. 디자인에서 더 큰 텍스트 영역을 수용할 수 없는 경우 디자인 작동 방식을 재고할 수 있습니다. 모든 사용자가 textarea { resize: both !important; } 를 사용자 스타일시트에 추가하여 기본 설정을 재정의합니다.
James Sumners
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
Imtiaz Ali Baigal
깊은 지원이 필요한 경우 구식 기술을 사용할 수 있습니다.
textarea { max-width: /* desired fixed width */ px; min-width: /* desired fixed width */ px; min-height: /* desired fixed height */ px; max-height: /* desired fixed height */ px; }yevgeniy
이것은 HTML에서 쉽게 수행할 수 있습니다.
<textarea name="textinput" draggable="false"></textarea> 이것은 나를 위해 작동합니다. draggable 속성의 기본값은 true 입니다.
Thusitha Wickramasinghe
당신은 단순히 사용합니다: resize: none; 당신의 CSS에서.
크기 조정 속성은 사용자가 요소의 크기를 조정할 수 있는지 여부를 지정합니다.
참고: 크기 조정 속성은 계산된 오버플로 값이 "표시"가 아닌 요소에 적용됩니다.
또한 현재 Internet Explorer에서는 크기 조정 이 지원되지 않습니다.
크기 조정에 대한 다양한 속성은 다음과 같습니다.
크기 조정 없음:
textarea { resize: none; }양방향(수직 및 수평) 크기 조정:
textarea { resize: both; }세로로 크기 조정:
textarea { resize: vertical; }가로로 크기 조정:
textarea { resize: horizontal; } 또한 width 와 height 가 있는 경우 더 넓은 브라우저 지원으로 텍스트 영역의 크기가 조정되지 않습니다.
Alireza
크기 조정 속성을 비활성화하려면 다음 CSS 속성을 사용하십시오.
resize: none;다음과 같이 인라인 스타일 속성으로 적용할 수 있습니다.
<textarea style="resize: none;"></textarea>또는 다음과 같이
<style>...</style>요소 태그 사이:textarea { resize: none; }
Webeng
다음과 같이 단순히 textarea 속성을 비활성화할 수 있습니다.
textarea { resize: none; }수직 또는 수평 크기 조정을 비활성화하려면 다음을 사용하십시오.
resize: vertical;또는
resize: horizontal;user7122338
CSS 3는 이 문제를 해결할 수 있습니다. 불행히도 현재 사용되는 브라우저의 60% 에서만 지원됩니다.
Internet Explorer 및 iOS의 경우 크기 조정을 끌 수 없지만 width 와 height textarea 크기를 제한할 수 있습니다.
/* One can also turn on/off specific axis. Defaults to both on. */ textarea { resize:vertical; } /* none|horizontal|vertical|both */Oriol
크기 조정 속성이 작동하는 방식을 보여주기 위해 작은 데모를 만들었습니다. 나는 그것이 당신과 다른 사람들에게도 도움이되기를 바랍니다.
.resizeable { resize: both; } .noResizeable { resize: none; } .resizeable_V { resize: vertical; } .resizeable_H { resize: horizontal; } <textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable."> This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </textarea> <textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable"> This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </textarea> <textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable"> This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </textarea> <textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable"> This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </textarea>Ambuj Khanna
@style 사용하면 사용자 정의 크기를 지정하고 크기 조정 기능을 비활성화할 수 있습니다 (resize: none;) .
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })Carlos de Jesus Baez
textarea 의 크기 조정을 비활성화하려면:
textarea { resize: none; } textarea 대한 크기 조정을 비활성화하려면 속성, name 또는 id 추가하고 무언가로 설정하십시오. noresize 로 명명됩니다.
HTML
<textarea name='noresize' id='noresize'> </textarea>CSS
/* Using the attribute name */ textarea[name=noresize] { resize: none; } /* Or using the id */ #noresize { resize: none; }Abk
jQuery로도 시도해 볼 수 있습니다.
$('textarea').css("resize", "none");Santosh Khalse
!important 를 추가하면 작동합니다.
width:325px !important; height:120px !important; outline:none !important; outline 은 특정 브라우저에서 파란색 윤곽선을 피하기 위한 것입니다.
kaelds
textarea { resize: none; } 위의 코드는 프로젝트 <textarea/> 요소의 크기 조정 가능 속성을 비활성화합니다. 원하는 경우 괜찮습니다. 그렇지 않으면 텍스트 영역 요소에 특정 클래스를 사용하고 싶을 것입니다.
.not-resizable { resize: none; }HTML에서
<textarea class="not-resizable"></textarea>Ismoil Shokirov
이 속성을 사용하십시오 resize: none;
textarea { resize: none; }Priya Maheshwari
출처 : http:www.stackoverflow.com/questions/5235142/how-do-i-disable-the-resizable-property-of-a-textarea
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| 목록이 비어 있는지 어떻게 확인합니까? (0) | 2021.10.27 |
|---|---|
| Android에서 활동 시작 시 EditText가 포커스를 얻지 못하도록 하는 방법 (0) | 2021.10.26 |
| Python의 목록 메서드 추가와 확장의 차이점은 무엇입니까? (0) | 2021.10.26 |
| Pandas에서 DataFrame의 행을 반복하는 방법 (0) | 2021.10.26 |
| 정의되지 않은 객체 속성 감지 (0) | 2021.10.26 |