텍스트 영역의 특이한 모양?
일반적으로 텍스트 영역은 다음과 같이 직사각형 또는 정사각형입니다.
그러나 다음과 같은 사용자 지정 모양의 텍스트 영역을 원합니다.
이것이 어떻게 가능한 걸까요?
서론
첫째, 다른 게시물에서 제안된 많은 솔루션이 있습니다.현재(2013년)는 CSS3 속성이 필요 없기 때문에 가장 많은 브라우저에 대응하고 있다고 생각합니다.단, 이 메서드는 지원되지 않는 브라우저에서는 작동하지 않습니다. contentdeditable조심하세요.
contenteditable
@Getz의 제안대로 div를 사용할 수 있습니다.contenteditable를를를를 를 、 를를를를를를 를를를 를를를 。다음은 메인 div의 왼쪽 위 및 오른쪽 위쪽에 두 개의 블록이 있는 예입니다.
보시다시피, 게시물에서 요청한 것과 같은 결과를 원한다면 테두리를 조금 가지고 놀아야 합니다.주 div의 모든 면에 파란색 테두리가 있습니다.그런 다음 빨간색 블록을 붙여 주 div의 위쪽 테두리를 숨기고 특정 측면(오른쪽 블록의 경우 아래쪽과 왼쪽, 왼쪽 블록의 경우 오른쪽)에만 테두리를 적용해야 합니다.
그 후, "Submit" 버튼 등이 트리거 되었을 때 Javascript를 통해 내용을 얻을 수 있습니다.그리고 나머지 CSS도 당신이 처리할 수 있을 것 같아요.font-size,color ) )) ) :)
풀코드 샘플
.block_left {
background-color: red;
height: 70px;
width: 100px;
float: left;
border-right: 2px solid blue;
border-bottom: 2px solid blue;
}
.block_right {
background-color: red;
height: 70px;
width: 100px;
float: right;
border-left: 2px solid blue;
border-bottom: 2px solid blue;
}
.div2 {
background-color: white;
font-size: 1.5em;
border: 2px solid blue;
}
.parent {
height: 300px;
width: 500px;
}<div class="parent">
<div class="block_left"></div>
<div class="block_right"></div>
<div class="div2" contenteditable="true">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
</div>
</div>에 우리는 '어느새'를 할 수 될 것이다.css-shapes을 사용하다 div가 contenteditable를 「」로 합니다.true combined와 css-shapes텍스트 영역을 어떤 형태로든 만들 수 있습니다.
현재 Chrome Canary는 이미 다음을 지원합니다. css-shapes과 같습니다 css-shapes
여기서는 폴리곤 모양을 사용하여 텍스트 흐름을 정의합니다.텍스트 영역에 대해 원하는 모양과 일치하는 두 개의 폴리곤을 작성할 수 있습니다.
「 」의 상세한 것에 는, 「 」를 참조해 주세요.css-shapes는 http://sarasoueidan.com/blog/css-shapes/ 에서 작성되었습니다.
Chrome Canary에서 css-shapes를 활성화하려면 다음 절차를 수행합니다.
- chrome://flags/#enable-experimental-web-platform-features를 복사하여 주소 표시줄에 붙여넣은 후 Enter 키를 누릅니다.
- 해당 섹션의 '활성화' 링크를 클릭합니다.
브라우저 창 하단에 있는 '지금 바로 다시 시작' 버튼을 클릭합니다.
출처 : http://html.adobe.com/webplatform/enable/
.container {
overflow: hidden;
shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px);
font-size: 0.8em;
}
/** for red border **/
.container:before {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 190px;
height: 190px;
background-color: white;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
.container:after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 190px;
height: 190px;
background-color: white;
border-left: 1px solid red;
border-bottom: 1px solid red;
}<div class="container" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae
tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien
auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor
libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu.
</div>작성된 폴리곤: http://betravis.github.io/shape-tools/polygon-drawing/
결과
텍스트 영역은 아니지만 이 도형을 사용하여 div를 만드는 데 성공하면 작동할 수 있습니다.
문자 영역만으로는 불가능할 것 같은데...
예를 들어 http://jsfiddle.net/qgfP6/5/ 입니다.
<div contenteditable="true">
</div>
만족할 수 있는 div를 사용하여 두 개의 코너 div를 사용할 수 있습니다.
<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true">
<div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
<div style="float:right; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
hello world, hello worldsdf asdf asdf sdf asdf asdf
</div>
이것은 CSS 지역에서도 실행할 수 있습니다.
Regions를 사용하면 CSS 속성을 사용하여 기존 스타일의 컨테이너로 콘텐츠를 플로우하고 페이지 상의 위치에 관계없이 선택하는 컨테이너 순서를 지정할 수 있습니다.
[현재 WebKit Nightly, Safari 6.1+ 및 iOS7에서 지원되며 플래그를 활성화한 후 크롬 및 오페라에서 이미 사용 가능: enable-experimental-web-platform-features - caniuse, Web Platform]
바이올린을 켜다
따라서 텍스트를 2개의 영역에 흐르게 하여 텍스트 영역 모양을 만들고 콘텐츠에 내용을 추가하여 편집할 수 있습니다.
마크업
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>
(관련) CSS
#content {
-ms-flow-into: article;
-webkit-flow-into: article;
}
.region {
-ms-flow-from: article;
-webkit-flow-from: article;
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 0 1px;
margin: auto;
left:0;right:0;
border: 2px solid lightBlue;
}
#box-a {
top: 10px;
background: #fff;
z-index: 1;
border-bottom: none;
}
#box-b {
top: 210px;
width: 400px;
overflow: auto;
margin-top: -2px;
}
그 결과:
지역에 대한 자세한 내용은 다음과 같습니다.CSS3 지역: HTML 및 CSS3를 통한 풍부한 페이지 레이아웃
상자 안의 긴 줄의 텍스트는 커서를 가운데 가장자리를 지나 아래로 떨어뜨릴 것이고 나는 그것을 고칠 수 없을 것 같다.
**[Fiddle Diddle][1]**
#wrap {
overflow: hidden;
}
#inner {
height: 350px;
width: 500px;
border: 1px solid blue;
}
#textContent {
word-wrap: break-word;
word-break: break-all;
white-space: pre-line;
}
#left, #right {
height: 50%;
width: 25%;
margin-top: -1px;
padding: 0;
border: 1px solid blue;
border-top-color: white;
margin-bottom: 5px;
}
#right {
margin-left: 5px;
float: right;
margin-right: -1px;
border-right-color: white;
}
#left {
margin-right: 5px;
float: left;
margin-left: -1px;
border-left-color: white;
}<div id="wrap">
<div id="inner">
<div id="left"></div>
<div id="right"></div>
<span id="textContent" contenteditable>The A B Cs</span>
</div>
</div>[1]: http://jsfiddle.net/yKSZV/
그건 불가능해요, 전하!텍스트 영역은 일반적으로 입력할 수 있는 직각 상자 또는 사각 상자입니다.
그러나 이와 같은 작업을 수행하려면 두 개의 텍스트 영역을 사용한 다음 지정된 너비와 높이를 지정할 수 있습니다.그렇지 않으면 그런 일은 없을 거야!
두 번째 방법은 편집 가능한 요소를 만드는 것입니다.
http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/
코드는 다음과 같습니다.
<div contenteditable="true">
This text can be edited by the user.
</div>
이를 사용하여 임의의 요소를 편집할 수 있습니다!치수를 줄 수 있고, 그러면 효과가 있을 거예요!텍스트 영역으로서만 표시됩니다.
참고 자료: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
CSS 쉐이프를 CSS와 조합한 경우contenteditable이것은 웹킷브라우저에서 할 수 있습니다.
먼저 enable-experimental-web-platform-features 플래그를 활성화해야 합니다.
그런 다음 웹킷 브라우저를 다시 시작하고 이 FILED를 체크하세요!
이 방법은 비표준 도형에도 적용됩니다.
마크업
<div class="shape" contenteditable="true">
<p>
Text here
</p>
</div>
CSS
.shape{
-webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
width: 400px;
height: 400px;
text-align: justify;
margin: 0 auto;
}
그럼 내가 어떻게 다각형 모양을 만들었을까?
이 사이트에 접속하여 나만의 모양을 만들어 보세요!
플래그 사용에 대한 주의사항: (여기에서)
모양, 영역 및 혼합 모드를 활성화하려면:
chrome://flags/#enable-experimental-web-platform-features를 복사하여 주소 표시줄에 붙여넣은 후 Enter 키를 누릅니다.해당 섹션의 '활성화' 링크를 클릭합니다.브라우저 창 하단에 있는 '지금 바로 다시 시작' 버튼을 클릭합니다.
Google 웹 디자이너 도구를 사용하여 복잡한 모양을 만들 수 있습니다.HTML5-canvas and CSS.
또한 이러한 도형 안에 텍스트를 입력할 수 있는 입력 도구와 같은 다른 도구를 사용할 수 있습니다.
출력 파일에는 많은 코드가 포함되어 있기 때문에 Google Web Designer 도구를 사용하여 작성된 샘플 데모를 제공합니다.
""가 없는 하는 contenteditableJavaScript에서도 이벤트를 사용하여 동일한 작업을 수행할 수 있지만 이는 매우 복잡한 회피책입니다.
유사 코드:
focused=false;
when user clicks the div
{
focused=true;
}
when user clicks outside the div
{
focused=false;
}
when user presses a key
{
if (focused)
{
add character of key to div.innerHTML;
}
}
언급URL : https://stackoverflow.com/questions/20728150/unusual-shape-of-a-textarea
'source' 카테고리의 다른 글
| Python으로 마우스 제어 (0) | 2022.09.11 |
|---|---|
| MariaDB Columnstore 데이터 cpimport의 "열 파일을 여는 중 오류" (0) | 2022.09.11 |
| 지정된 유형의 컬렉션을 암시하는 형식 (0) | 2022.09.11 |
| Ubuntu에 MariaDB 설치: "패키지를 찾을 수 없습니다." (0) | 2022.09.11 |
| Java: int 배열이 0이 아닌 요소로 초기화됨 (0) | 2022.09.11 |