입력 또는 텍스트 영역 내에서 포커스가있는 선 색상 바꾸기

사용자가 텍스트 영역 내부를 클릭하면 포커스가있는 선이 색상을 변경하는 많은 온라인 편집자 (예 : dillinger)를 보았습니다. 나는 물건이 여기에서 작동하는 방법을 알고 싶어한다. 선 색상뿐만 아니라 편집자의 편집 부분에서 가능한 모든 스타일링은 완전히 인식하지 못합니다. 나는 그것에 대해 인터넷 검색을하면서 얼룩말 줄무늬의 개념을 접하게되었지만 한 줄에 동적으로 초점을 맞추어야하는 편집 가능한 부분과 관련이 없다고 생각합니다.입력 또는 텍스트 영역 내에서 포커스가있는 선 색상 바꾸기

그래도 가능하지만 어떻게 될까요?

PS :이 작업을 수행하기위한 기존 도구/유틸리티를 제공하지 마십시오. 나는 바퀴를 다시 발명하는 것을 선호한다. 쉬운 길이 아니라면 적어도 지식에 최선을 다하십시오.

미리 감사드립니다.

출처

2017-01-21 Ritik Saxena

텍스트 영역이지만 특정 방식으로 스타일을 지정하기 위해 그 아래에 많은 div가 있습니다 (즉, 낮은 z- 색인). 좀 더 구체적으로 이것은 Ace editor입니다. 그래서 그들은 문서에서 몇 가지 효과를 자세히 설명 할 수 있습니다.

예를 들어, 해당 페이지의 소스를 검사하면 ace_active-line 클래스가 텍스트 영역 아래에있는 div라는 것을 알 수 있습니다. textarea는 투명한 배경을 가지고 있기 때문에 아래 div를 볼 수 있습니다.

출처

2017-01-21 07:19:30 grovesNL

가장 간단하게 말해서 CSS 선택기의 활용을 통해 실현됩니다. : 포커스. 심지어 계층화 된 div 및 기타 수반되는 요소와

의 최상위 사업부는 예를 들어, 초점이 때이 div의 스타일을 지정할 수 있습니다 :

input div.inner-input { 
    border: 1px black; 
} 

input:focus div.inner-input { 
    border: 1px orange; 
}

이것은 또한 또 다른 사업부의의를 편집 할 jQuery를 통해 달성 될 수있다 클래스 또는 속성에 대한 정보를 제공합니다.

input.onFocus() { 
    $('.under-div').addClass('active-line'); 
}

출처

2017-01-21 07:29:25

휠을 재발 명하려면 바퀴를 사용하는 도로를 만들어야합니다. 이 경우 태그에서 언급 한 것처럼 텍스트 영역에서 작업 할 수 없습니다. 대신 편집기의 렌더링은 모두 사용자의 것입니다. 접근 방식의

하나는 다음과 같습니다

텍스트를 입력 할 영역에 대한 <div> 컨테이너를 만듭니다.
또 다른 <div>을 첫 번째 내부에 생성하십시오. 이것은 우리 오버레이가 될 것입니다. 낮은 z-index인지 확인하십시오. z-index: 1이라고 가정 해 보겠습니다.
첫 번째 컨테이너 아래에 세 번째 <div> 컨테이너를 만듭니다. 이것은 실제 텍스트 편집기입니다. 투명도가 background이고 그 이상이 z-index이어야합니다.
<div>을 용기 # 2 안에 넣으십시오. 그것은 우리의 행 형광펜이 될 것입니다.

편집기의 모든 행에 대해 문자로 <span>으로 자체 <div>을 렌더링해야합니다.네, 커스텀 코드가 많습니다 : 사용자가 Enter 키를 눌러 새 라인을 시작하는 등의 새로운 기능을 새로 작성해야합니다. <div>.

또한 이러한 row-div의 높이가 특정 값 (예 : )으로 고정되어 있는지 확인해야합니다. 값 및 계산식 뒤에 계산식을 지정할 수 있습니다. 높이, 어쩌면 사용자 선호도 또는 글꼴 크기). 예를 들어 사용자가 단어 줄 바꿈을 사용할 수 있도록 설정 한 경우와 같이 자랄 수 있습니다.

모든 작업이 완료되면 진짜 마법이 시작될 수 있습니다. 세 줄짜리 문서가로드되었다고 가정 해 봅시다. 그것은 다음과 같이 표시됩니다

<div id="textContainer"> 
    <div id="overlay" style="z-index: 1"> 
     <div id="highlighter" style="background: yellow; display: block;"> 
     </div> 
    </div> 
    <div id="textEditor" style="background: transparent; z-index: 100;"> 
     <div> 
      <span>Line 1</span> 
     </div> 
     <div> 
      <span>Line 2</span> 
     </div> 
     <div> 
      <span>Line 2</span> 
     </div> 
    </div> 
</div>

이제 화면에 textContainer의 정확한 위치와 폭을 결정할 수 있습니다 : 쉽게 (그리고 약간의 성능 오버 헤드) 다른 화면/창 크기를 처리하는 데 필요한입니다.

사용자가 특정 행에 초점을 맞추고 때 행 (<div>)에 초점을 맞춘 사용자의 현재 top 및 height 값을 잡고 같도록 <div id="highlighter"> 위치와 높이를 설정하는 몇 가지 자바 스크립트를 실행해야합니다.

출처

2017-01-21 07:44:51

어떻게 당신은'input' 또는'textarea'없이 사용자로부터 입력을 할 계획입니까? –

-1

입력란에 포커스가있을 때 CSS 초점 기능을 사용하여 윤곽선 색을 변경하십시오.

input[type=text]:focus, textarea:focus { 
    box-shadow: 0 0 5px rgba(81, 203, 238, 1); 
    padding: 3px 0px 3px 3px; 
    margin: 5px 1px 3px 0px; 
    border: 1px solid rgba(81, 203, 238, 1); 
}

근무 바이올린 : https://jsfiddle.net/gwLgckvf/

출처

2017-01-21 07:48:00 erdeepak

입력 또는 텍스트 영역 내에서 포커스가있는 선 색상 바꾸기

답변

관련 문제