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

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

평소 텍스트 영역

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

맞춤형 텍스트 영역

이것이 어떻게 가능한지?

답변

소개

첫째, 다른 게시물에서 제안 된 많은 솔루션이 있습니다. 나는 이것이 CSS 2013 속성이 필요하지 않기 때문에 현재 (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 모양을 사용하려면 다음 단계를 따르세요.

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/

결과

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

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

어드민

답변

소개

사업부 솔루션 contenteditable

전체 코드 샘플

답변

답변

답변

답변

깡깡이

마크 업

(관련) CSS

답변

답변

사업부 솔루션 `contenteditable`