Как добавить смайл в поле ввода
Как реализовать работу так, чтоб при клике на ссылку(смайл), у меня он добавлялся в поле ввода (input). Если можно как то лучше реализовать, то буду рад идеям!
вот более-менее универсальный код:
для каждого смайлика я добавил свой атрибут my-data-smile в котором содержится код для смайлика
событие нажатия мышки повешено на все окно, чтобы отслеживать нажатие на нужные смайлики (по имени класса)
а дальше берем значение атрибута и вставляем в поле
P.S.
я только сделал добавление в конец текста, а по хорошему надо сделать добавление на место курсора (если он стоит) — это уж автор сам доделай
Create Smiley Emojis using HTML and CSS.
Creating your own emojis using HTML and CSS and playing with eyes, lips, color etc. is fun. In this tutorial, I have created some different type of emojis by manipulating one or two or more elements using CSS. So let’s ready to learn how to create smiley using pure HTML and CSS.
Create Smiley Emoji Using Pure HTML and CSS
In the below code, I have created three classes named as “face”, “eyes” and “smile”. All these three classes are used to create elements of emojis as the name suggests. Here internal CSS is used to manipulate classes.
Classes:
- face: This class is created to manipulate with face color and shape of it and this will be the main class which holds other elements as well. Here in this emoji, I have created a round face using attribute border-radius : 50% with yellow color.
- eyes: This class is created to play with eyes. Here in this code, using the same attribute border-radius: 50% with black color but with a smaller size.
- smile: the Class smile is created to create a smile in my emoji.Here in this code,using attribute border-bottom-left-radius: 50% and border-bottom-right-radius:50% . These two attributes make rectangle round from the bottom side only.
Emojis using HTML and CSS
Here in this code, I have created 6 different emojis using the above smiley emoji code. In the output, you can see 6 different types of emojis with the variation in lips and eyes. These variations are done using inline CSS using attribute of the border only. Here in this code, I have created one more class known as flat-eyes, where border-radius attribute is not used.
Use Emoji in HTML, PHP, JavaScript and CSS
Emojis are so popular in all platforms, whether in mobile apps or webpages. In comments, social media posts, text in web pages and so one. They provide emotional interaction with users and give a bit of life and feelings to the media.
In this article, I’ll show you how to include them in you HTML, PHP, JavaScript and CSS.
HTML Emojis
You can add emojis in HTML using any of the 3 ways below:
- Direct emoji embedding in HTML code
- Using emoji decimal reference code
- Using emoji hexadecimal reference code
Let’s look at an example including all three methods.
What you should see is:
Make sure to set the document’s character encoding to UTF-8 in the head tag using <meta charset=”UTF-8">
PHP Emojis
There are 2 ways you can display emojis in PHP.
- Using UTF-8 bytes as given the emojis table.
- Using the emoji’s Unicode.
Let’s take a look at an example:
And that’s what you should see:
JavaScript Emojis
String.fromCodePoint() function in JavaScript is used to return the string representation of the provided code(s). The syntax is:
This same function can also be used to return and display emojis based on their Unicode (decimal or hexadecimal). Let’s take a look at the below example. I’ll put my JavaScript in a <script> HTML block.
The output result should be something like this:
Easy and simple. Isn’t it?
Well, there is another way to include emojis in JavaScript without the use of that function, and that is by directly assigning the Unicode value, Like this:
This is fun when the hexadecimal Unicode value is 16-bit (4-digit), but when you try to display a 5-digit Unicode emoji, you will get something like this:
Not what you expected, right?
Well, to use the same method and get the correct emojis, you will need to use the Unicodes surrogates. For example, the Unicode for burger is 0x1F354. Instead of putting \u1F354 in your JavaScript code, you’ll have to use the surrogates D83C DF54 as \ud83c\udf54. Where did I get these surrogates from? In the emojis table page (URL below), click on the Unicode of the desired emoji to go to it’s inspect page where you can see more details. There you can see the surrogates of the emoji.
So to display the burger, I’ll have to do this:
You may need to use these surrogates wherever your emoji is not displayed properly and it is more than 4-digit Unicode.
CSS Emojis
Ok. Let’s try and create a recycling badge using CSS. The output should look like this.
In this example, I’ve used ::before to create a psudo-element and assign it’s content to the emoji using the emoji Unicode. The value of the content attribute will be “\” plus the hexadecimal value. No “u” is used here.
The code is below:
I hope you find the above useful. Comments, suggestions and questions are welcomed. ��