Programing

텍스트 영역의 비정상적인 모양?

lottogame 2020. 3. 26. 08:19
반응형

텍스트 영역의 비정상적인 모양?

일반적으로 텍스트 영역은 다음과 같이 직사각형 또는 정사각형입니다.

평소 텍스트 영역

그러나 나는 예를 들어 다음과 같은 사용자 정의 모양의 텍스트 영역을 원합니다.

맞춤형 텍스트 영역

이것이 어떻게 가능한지?

소개

첫째, 다른 게시물에서 제안 된 많은 솔루션이 있습니다. CSS3 속성이 필요하지 않기 때문에 현재 (2013 년) 가장 많은 브라우저와 호환되는 브라우저라고 생각합니다. 그러나이 방법은을 지원하지 않는 브라우저 에서는 작동 하지 않으므로contentdeditable 주의하십시오.

사업부 솔루션 contenteditable

@Getz 에서 제안한 것처럼 div를 사용하고 contenteditable일부 div로 모양을 만들 수 있습니다 . 다음은 메인 div의 왼쪽 상단과 오른쪽 상단에 떠있는 두 개의 블록이있는 예입니다.

Firefox 28의 결과

보시다시피, 게시물에서 요청한 것과 동일한 결과를 원하면 테두리를 조금만 사용해야합니다. 메인 div는 모든면에 파란색 테두리가 있습니다. 다음으로, 빨간색 블록은 주요 사업부의 숨기기 상단 테두리 잘 접착 될 수 있으며, 당신은 단지 특정 측면 (에 그들에게 국경을 적용 할 필요 하단 왼쪽 오른쪽 블록, 하단 오른쪽 왼쪽)입니다.

그 후, 예를 들어 " 제출 "버튼이 트리거 될 때 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이것을 달성하기 위해 소위 사용할 수 있습니다 . contenteditable속성이 true결합 된 div css-shapes는 텍스트 영역을 모든 종류의 모양으로 만들 수 있습니다.

현재 Chrome Canary는 이미을 지원합니다 css-shapes . CSS 모양으로 가능한 예는 다음과 같습니다.

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

여기서는 텍스트 흐름을 정의하기 위해 다각형 모양을 사용하고 있습니다. 텍스트 영역에 원하는 모양에 맞게 두 개의 다각형을 만들 수 있어야합니다.

자세한 내용은 http://sarasoueidan.com/blog/css-shapes/css-shapes 에서 작성되었습니다.

Chrome Canary에서 CSS 모양을 사용하려면 다음 단계를 따르세요.

  1. chrome : // flags / # enable-experimental-web-platform-features를 주소 표시 줄에 복사하여 붙여 넣은 다음 Enter 키를 누릅니다.
  2. 해당 섹션에서 '활성화'링크를 클릭하십시오.

  3. 브라우저 창 하단에서 '지금 다시 시작'버튼을 클릭하십시오.

    에서 : 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/

결과

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

http://jsfiddle.net/A8cPj/1/

어쩌면 Content Editable ?

텍스트 영역이 아니지만이 모양으로 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 지역을 사용 하여이 작업을 수행 할 수도 있습니다

리전을 사용하면 CSS 속성을 사용하여 페이지의 위치에 관계없이 선택한 컨테이너 순서를 지정하여 컨텐트를 기존 스타일 컨테이너로 흐르게 할 수 있습니다.

(웹 플랫폼)

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

[현재 WebKit Nightly, Safari 6.1 이상 및 iOS7에서 지원되며 플래그를 활성화 한 후 크롬 및 오페라에서 이미 사용 가능 : enable-experimental-web-platform-features- caniuse , Web Platform ]

깡깡이

따라서 두 영역을 통해 텍스트를 이동하여 해당 텍스트 영역 모양을 만들고 내용에 편집 가능한 내용을 추가하여 편집 할 수 있습니다.

마크 업

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

그 사이가 불가능합니다! 텍스트 영역은 일반적으로 입력 할 수있는 사각형 또는 사각형 상자입니다.

그러나 같은 것을 만들기 위해 2 개의 텍스트 영역을 사용하고 지정된 너비와 높이를 지정할 수 있습니다. 그렇지 않으면 나는 그것이 일어날 것이라고 생각하지 않습니다!

두 번째 방법은 편집 가능한 요소를 만드는 것입니다.

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 모양 을 가진 contenteditable이는 웹킷 브라우저에서 수행 할 수 있습니다.

먼저 플래그를 활성화해야합니다 : enable-experimental-web-platform-features

그런 다음 웹킷 브라우저를 다시 시작한 다음이 FIDDLE 을 확인하십시오 !

이 방법은 비표준 모양에도 적용됩니다.

마크 업

 <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 도구를 사용하여 생성 된 샘플 데모를 제공합니다.

피들 데모 >>

어떤 이유로 든 브라우저가없는 브라우저를 실제로 지원 해야하는 경우 contenteditable이벤트를 사용하여 JavaScript에서 동일한 작업을 수행 할 수 있습니다. 매우 복잡한 해결 방법입니다.

의사 코드 :

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

반응형

'Programing' 카테고리의 다른 글

태그 또는 태그 지정을위한 권장 SQL 데이터베이스 디자인  (0) 2020.03.26
bash에서 현재 사용자의 사용자 이름을 얻습니까?  (0) 2020.03.26
double이 NaN과 같은지 어떻게 테스트합니까?  (0) 2020.03.26
더블 클릭 후 텍스트 선택 방지  (0) 2020.03.26
여러 파일에서 문자열을 검색하고 Powershell에서 파일 이름을 반환하는 방법은 무엇입니까?  (0) 2020.03.26

'Programing'의 다른글

  • 현재글텍스트 영역의 비정상적인 모양?

관련글

댓글

티스토리툴바