각 문자를 입력 할 때 색상을 지정할 수있는 경량 html/javascript 위젯을 작성하려고합니다. 나는 그것을 할 수있는 방법은 이벤트에 반응하는 입력 필드를 가질 것이지만, 실제 디스플레이는 입력 필드의 값을 읽고, 강조 표시하고, 출력하는 HTML div에 의해 겹쳐져 있다고 생각했습니다. 이것은 일을하는 데 권장되는 방법입니까? 거기에 이미 이것을 구현하고 거기에 대해 생각하지 못했을 까봐 까다로운 세부 사항을 처리하는 라이브러리가 있습니까?입력 필드의 표시 대체
편집 : http://perplexed.co.uk/993_contenteditable_cross_browser_wysiwyg.htm
이 관심의 대상이 될 수 있습니다 : : 나는 아마의 contentEditable 사업부를 설정합니다 http://www.w3.org/TR/html5/editing.html#contenteditable
및 자바 스크립트 호출이 좋은 기사를 가져 cronoklee의의 contentEditable 아이디어를 구현하는 방법을 찾고 마지막으로 입력 한 문자를 스타일이 적용된 span 태그로 묶는 키 누르기 기능. 입력 된 데이터를 제출해야하는 경우 입력 유형 = '숨김'을 설정하고 키 누르기에서 입력 유형을 채 웁니다. 하나를 다른 것에 오버레이 할 필요가 없습니다!
EDIT : 난 그냥 div.textContent를 사용하여 입력 내용을 가져올 수 있다는 것을 깨달았습니다. 그러면 스타일을 지정하지 않고 텍스트 만 표시되므로 추가 입력 필드가 필요 없으므로 문자를 잡을 수 있습니다.
많은 문제가 아니라 많은 이익을 얻습니다. 개인적으로 나는 stackoverflow가 그것을하는 방식을 좋아한다. textarea와 onblur를 사용하여 강조 표시를 미리보기에 적용한다.
이것은 온라인 단어 게임을위한 것입니다. 사용자가 다른 무언가를 입력하기 시작한 경우 (예 : 문자가 빨간색 글자로 바뀌어야 함) 다른 일부 전역 조건 (예 : 무언가를 입력 할 수 있고 문자열의 다른 부분이 색칠 할 수있는 경우)에 실시간 피드백이 있어야합니다 그 자체로) –
구문 하이 라이터/편집기를 사용하려면 정말 좋습니다. 데모가 있습니다 : http://ajaxorg.github.com/ace/build/editor.html
너무 무겁습니다. 원하는 모든 것은 콜백 (callback)을 통해 색칠 된 텍스트입니다. 완전한 편집기 또는 렉서 (lexer)가 아닙니다. –
나는 너무 강력합니다. 사용자가 텍스트 필드에 임의의 html을 입력하게하고 싶지 않습니다. 입력하거나 수정하는 동안 자신의 텍스트를 강조 표시하기를 원합니다. –
위에서 설명한 시스템을 사용하면 지정한 문자로만 입력을 필터링 할 수 있습니다. 당신은 편집을 완전히 비활성화 할 수도 있고 div가 사용자 유형으로 javascript로 채워지도록 할 수도 있습니다. 즉, 유용성 문제인 캐럿을 보지 못하게 될 것입니다. – cronoklee
흠 - 그래, 어디로 가는지 알 겠어. 좋은 아이디어, 그리고 무료로 div의 임의의 스타일링을 얻는다. –