programing

텍스트 영역의 크기 조정 가능한 속성을 비활성화하려면 어떻게 해야 합니까?

oldcodes 2023. 4. 9. 22:23
반응형

텍스트 영역의 크기 조정 가능한 속성을 비활성화하려면 어떻게 해야 합니까?

합니다.textarea.

크기를 할 수 .textarea textarea마우스를 드래그합니다.떻게 하하 활활 활활 활? ???

여기에 이미지 설명을 입력하십시오.

다음 CSS 규칙은 요소의 크기 조정 동작을 디세블로 합니다.

textarea {
  resize: none;
}

(전부는 에로 하는 textareas, 몇 가지 옵션이 있습니다.

하시면 됩니다.class(Atribute)<textarea class="textarea1">

.textarea1 {
  resize: none;
}

의 「」를 , 「」를 디세블로 합니다.textareaname를 「」로 합니다.foo (예:)<textarea name="foo"></textarea>

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

「」를 해 주세요.id 속즉 （ ） ） 。<textarea id="foo"></textarea>

#foo {
  resize: none;
}

W3C 페이지에는 크기 조정 제한(none, both, horizontal, vertical 및 inherit)에 사용할 수 있는 값이 나열됩니다.

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

적절한 호환성 페이지를 검토하여 현재 이 기능을 지원하는 브라우저를 확인하십시오.Jon Hulka가 코멘트한 바와 같이 최대 폭, 최대 높이, 최소 폭 및 최소 높이를 사용하여 CSS에서 치수를 더욱 제한할 수 있습니다.

알아두는 것이 매우 중요합니다.

이 속성은 오버플로 속성이 표시되지 않는 한 아무 작업도 수행하지 않습니다. 이 속성은 대부분의 요소의 기본값입니다.따라서 일반적으로 이 기능을 사용하려면 오버플로우 같은 것을 설정해야 합니다: 스크롤;

Sara Cope의 인용문, http://css-tricks.com/almanac/properties/r/resize/

CSS에서는...

textarea {
    resize: none;
}

두 가지를 찾았어요

첫번째

textarea{resize: none}

이는 아직 출시되지 않은 CSS 3으로 Firefox 4(이후), Chrome 및 Safari와 호환됩니다.

다른 형식 기능은 디르 속성을 고려하여 오른쪽 스크롤바를 삭제하는 것입니다.

코드 및 다른 브라우저

기본 HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

일부 브라우저

  • Internet Explorer 8

여기에 이미지 설명을 입력하십시오.

  • 파이어폭스 17.0.1

여기에 이미지 설명을 입력하십시오.

  • 크롬

여기에 이미지 설명을 입력하십시오.

CSS 3에는 이를 가능하게 하는 UI 요소의 새로운 속성이 있습니다.속성은 크기 조정 속성입니다.따라서 스타일시트에 다음 항목을 추가하여 모든 텍스트 영역 요소의 크기를 조정할 수 없습니다.

textarea { resize: none; }

이것은 CSS 3 속성입니다.브라우저의 호환성을 확인하려면 호환성 차트를 사용합니다.

개인적으로 텍스트 영역 요소에서 크기 조정을 사용하지 않도록 설정하는 것은 매우 성가신 일입니다.이것은 설계자가 사용자의 클라이언트를 "절단"하려고 하는 상황 중 하나입니다.설계가 더 큰 텍스트 영역을 수용할 수 없는 경우, 설계의 작동 방식을 재고하는 것이 좋습니다. 가 " " " 를 할 수 있습니다.textarea { resize: both !important; }사용자 스타일시트로 이동하여 사용자 기본 설정을 재정의합니다.

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

깊이 있는 지원이 필요한 경우 구식 기술을 사용할 수 있습니다.

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;
}

이것은 HTML 로 간단하게 실시할 수 있습니다.

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

난 이거면 돼.기본값은 다음과 같습니다.true를 위해draggable기여하다.

이 속성 사용resize: none;

textarea {
  resize: none;
}

사용법은 다음과 같습니다.resize: none;를 참조해 주세요.

크기 조정 속성은 사용자가 요소의 크기를 조정할 수 있는지 여부를 지정합니다.

참고: 크기 조정 속성은 계산된 오버플로 값이 "보이는" 값이 아닌 요소에 적용됩니다.

또한 현재 Internet Explorer에서는 크기 조정이 지원되지 않습니다.

크기 조정에 대한 다양한 속성은 다음과 같습니다.

크기 조정 안 함:

textarea {
  resize: none;
}

양쪽 크기 조정(수직 및 수평):

textarea {
  resize: both;
}

수직 크기 조정:

textarea {
  resize: vertical;
}

수평 크기 조정:

textarea {
  resize: horizontal;
}

또,width그리고.heightCSS 또는 HTML에서는 보다 넓은 브라우저가 지원되므로 텍스트 영역의 크기가 조정되지 않습니다.

다음과 같이 텍스트 영역 속성을 비활성화할 수 있습니다.

textarea {
    resize: none;
}

수직 또는 수평 크기 조정을 비활성화하려면

resize: vertical;

또는

resize: horizontal;

다음 CSS 코드를 설정할 필요가 있습니다.component.css

textarea {
    resize: none;
}

크기 조정 속성을 디세블로 만들려면 다음 CSS 속성을 사용합니다.

resize: none;

  • 다음과 같이 인라인 스타일 속성으로 적용할 수 있습니다.

    <textarea style="resize: none;"></textarea>

  • 또는 그 사이에<style>...</style>요소 태그는 다음과 같습니다.

    textarea {
    resize: none;
}

textarea {
  resize: none;
}

위의 코드는 크기 조정 가능한 모든 속성을 비활성화합니다.<textarea/>구성 요소를 포함합니다.문제가 없는 경우 텍스트 영역 요소에 특정 클래스를 사용할 수 있습니다.

.not-resizable {
   resize: none;
}

HTML에서

<textarea class="not-resizable"></textarea>

CSS 3은 이 문제를 해결할 수 있습니다.안타깝게도 현재 이 기능은 중고 브라우저의 60%에서만 지원됩니다.

Internet Explorer 및 iOS의 경우 크기를 끌 수 없지만 크기를 제한할 수 있습니다.textarea설정함으로써 치수 설정width그리고.height.

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

데모 참조

모두 크기 조정 사용 안 함textareas:

textarea {
    resize: none;
}

특정 크기 조정을 실행 중지하려면textarea, Atribute를 추가합니다.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;
}

크기 조정 속성 작동 방식을 보여 주는 작은 데모를 만들었습니다.당신과 다른 사람들에게도 도움이 되길 바랍니다.

.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>

와 함께@style커스텀 사이즈를 지정해, 사이즈 변경 기능을 무효로 할 수 있습니다.(resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

텍스트 영역 {resize: none;}을(를) 사용하여 텍스트 영역의 크기 조정 가능한 속성을 사용하지 않도록 설정할 수 있습니다.

textarea {
   resize: none;
}

데모

jQuery에서도 시도할 수 있습니다.

$('textarea').css("resize", "none");

추가 중!important동작시키는 것:

width:325px !important; height:120px !important; outline:none !important;

outline특정 브라우저의 파란색 윤곽을 피하기 위한 것입니다.

언급URL : https://stackoverflow.com/questions/5235142/how-do-i-disable-the-resizable-property-of-a-textarea

반응형

'programing' 카테고리의 다른 글

부트스트랩3과 수직 정렬  (0) 2023.04.14
다른 cmd.exe 프롬프트에서 새 cmd.exe 창을 만듭니다.  (0) 2023.04.14
SQL Server 쿼리에 테이블 구조를 표시하려면 어떻게 해야 합니까?  (0) 2023.04.09
wpf에서 창 내 요소의 절대 위치를 가져옵니다.  (0) 2023.04.09
node.js를 Windows에서 완전히 삭제하는 방법  (0) 2023.04.09

'programing'의 다른글

  • 현재글텍스트 영역의 크기 조정 가능한 속성을 비활성화하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바