웹 사이트에 양식이 있습니다. 이 양식 안에 일부 이모티콘 버튼이 있습니다.텍스트 필드의 텍스트를 이미지로 대체하십시오.
사용자가이 버튼 중 하나를 클릭하면 <textfield>, 에 그림 이모티콘을 추가하지만 ":)"처럼 보입니다.
어떻게 대체 할 수 있습니까? 그림 이모티.
예 : 사용자가 버튼을 클릭하면 <img src="img/emoji/1.png">을 추가하고 표시해야합니다.
그림 이모티콘에는 UTF8 문자를 사용하십시오. UTF8 이모티콘은 텍스트 문자로 간주되기 때문에이 용도로 HTML을 사용할 필요가 없으며 일반 텍스트 영역과 텍스트 입력을 특별한 방법없이 렌더링합니다.
다음은 일부 유니 코드 UTF8 이모티콘에 대한 참조입니다. 버튼 코드에서 UTF8 심볼의 코드로;) 또는 무엇이든 바꿉니다. 예를 들어 링크의 테이블에서 웃는 얼굴의 코드 U + 1F600을 표시합니다. 귀하의 스크립트에서 당신은 따옴표로 \u1F600로 말하고 싶습니다. 이모티콘 문자가 렌더링됩니다. 대부분의 브라우저, 특히 모바일에서 이러한 문자를 제대로 지원하지만 css를 사용하여 그림 이모티콘을 가져 와서 보강 할 수 있습니다.
http://www.unicode.org/emoji/charts/full-emoji-list.html
부록 : 심지어 절단 및 붙여 넣기 UTF8 그림 이모티콘의 직접 코드로 할 수 있습니다. 그들은 UTF8에서 유효한 문자이기 때문에 유효한 코드입니다. 변수 이름에서도 사용할 수 있습니다.
필자는 UTF8 이모티콘을 원하지 않는다. Twitch emotes를 사용하고 싶습니다 –
@RyuZockt "Emote와 배지 이미지는 Twitch Interactive 또는 해당 소유자의 자산입니다. 허락을받지 않고 재사용하지 마십시오." –
그냥 제안하지만 트 위치 (Twitch) 글꼴이나 비슷한 글꼴을 찾을 수 있습니다. 오픈 소스 라이선스가있을 수 있습니다. 동일하지 않을 수도 있지만 저작권 위반에 대해 걱정할 필요가 없으며 스크립트 수정이 최소화됩니다. – jdmayfield
jquery selector를 사용하여 :)을 선택하고 이미지 요소로 바꿀 수 있습니다. 당신이 jquery를 사용하지 않는다면 똑같은 것을 plain j로 할 수 있습니다. – user3711357
아마도 귀하의 양식은 일부 편집기 라이브러리에 의해 제공됩니다. 어떤 편집기 라이브러리를 사용하고 계신지 알고 계십니까? 귀하의 웹 사이트는 무엇을 실행하고 있습니까? –