텍스트 영역 내부의 색칠 라인

Question

텍스트 영역을 컬러로 표시 할 수있는 방법이 있습니까? 제가 이루고자하는 목표는 모든 두 번째 줄, 즉 흰색, 회색, 흰색, 회색, 흰색, 회색 ...입니다. 사용자는 "이름을 입력하십시오. 새 줄부터 입력하십시오."와 같이 많은 내용으로 작성해야합니다.

어쨌든 jQuery를 사용하므로 간단한 솔루션을 만든다면 완벽 할 것입니다.

Answer 1

당신이 찾고있는 것은 얼룩말 줄무늬라고 불리는데, 어쩌면 일부 Google 검색에서 도움이 될 것입니다. 그러나, 나는 현재 텍스트 영역 내에서 텍스트에 이것을 수행하는 방법이 있다고 생각하지 않는다. (배경 이미지 해킹을 사용하는 것 외에).

CSS3에는 nth-child psuedo 클래스와 같은 많은 강력한 기능이 있습니다. 이를 사용하는 방법이있을 수 있지만 다시 텍스트 영역 내에서 그렇게 할 방법이 없을 것입니다.

아마도 다른 해결책은 텍스트를 텍스트 영역에 입력 한 다음 텍스트 옆에 입력하거나 멋지게 형식화 된 버전을 보여주는 것입니다. jquery를 사용하여 텍스트를 실시간으로 파싱하고 얼룩말을 스트립 표시합니다.

편집 : 다른 아이디어가 일 수 있으며, 일 수 있지만 약간의 실험이 필요합니다. jquery를 사용하여 텍스트 영역의 각 텍스트 줄의 절대 위치를 얻는 방법이있을 수 있습니다. 나는 적어도 텍스트 영역의 왼쪽 상단의 절대 위치를 얻고, 텍스트의 줄 높이를 얻고, 줄 수 (텍스트의 줄 바꿈 수)를 곱하고, 약간 테스트하고 조정할 수 있다고 생각합니다. 텍스트 영역에서 각 행의 위치를 ​​가져올 수 있어야합니다. 그런 다음 jquery를 사용하여 textarea만큼 넓고 텍스트 줄만큼 큰 텍스트 줄마다 텍스트 영역 뒤에 색상이 지정된 div를 그립니다. 텍스트 영역도 투명해야합니다.

좀 더 많은 작업을 수행하면 얼룩말 줄무늬가 2 줄 이상의 높이가 될 수 있도록 텍스트 줄이 줄 바꿈했는지 감지 할 수있을 정도로 지브라 줄무늬 논리를 사용할 수 있습니다.

일할 수도 있습니다. 행운을 빕니다!

Answer 2

이 작업을 수행하는 한 가지 방법은 텍스트 영역의 배경을 사용하는 것입니다.

<style type="text/css"> 
    textarea { background-image: url(bg.png); } 
</style> 

말했다되고, 당신은 그것을 바로 얻을 수있는 타일과 라인 높이 놀러해야 할 것이다, 그러나 당신이 사용하지 않고 원하는 것을 달성 할 수 있어야한다 스크립팅.

Answer 3

실제 텍스트를 다른 색상으로 만들려면 순수 <textarea>을 사용하여이를 수행 할 방법이 없습니다. TinyMCE과 같은 서식있는 텍스트 편집기를 사용할 수는 있지만 너무 과장 될 수 있습니다.