Emoji zwischen Text hinzufügen – jQuery

[ad_1]

In diesem Tutorial zeigen wir Ihnen, wie Sie mit jQuery Emojis zwischen Texten einfügen können. Der Emoji-Picker ist eine Bibliothek, mit der Sie eine große Auswahl an Emojis auswählen können. Es handelt sich um eine Javascript-Bibliothek, die das Emoji-Zeichen zurückgibt. Sie können das Emoji auch in Ihre Eingabefelder einfügen.

Diese Bibliothek ist besonders nützlich, wenn Sie eine Chat-App entwickeln. Beispielsweise kann der Benutzer Emojis in Nachrichten teilen.

Es gibt jedoch ein Problem: Was passiert, wenn der Benutzer eine Nachricht eingegeben hat und nun das Emoji zwischen die Nachricht einfügen möchte? Die Bibliothek stellt diese Funktionalität standardmäßig nicht bereit.

Wir ermitteln also die aktuelle Cursorposition im Eingabefeld und setzen das Emoji zwischen den Text.

Anforderungen:

  1. jQuery
  2. Emoji-Auswahl
  3. Twemoji

Nachdem Sie alle oben genannten Dateien heruntergeladen haben, erstellen Sie zwei Ordner „css“ und „js“. Platzieren Sie die CSS-Dateien im Ordner „css“ und die Javascript-Dateien im Ordner „js“.

Danach müssen Sie alle diese Dateien in Ihren Code einbinden:

<link rel="stylesheet" href="css/emojis.css" />

<script src="js/jquery.js"></script>
<script src="js/DisMojiPicker.js"></script>
<script src="js/twemoji.min.js"></script>

Erstellen Sie dann ein Eingabefeld, in das Sie den Text eingeben und ihm eine eindeutige ID geben.

<textarea id="textInput"></textarea>

Erstellen Sie einen Container, in dem die Emoji-Auswahl angezeigt wird. Geben Sie ihm auch eine eindeutige ID.

Initialisieren Sie in Ihrem Javascript die Emoji-Auswahl.

<script>
	$("#emojis").disMojiPicker()
	twemoji.parse(document.body)
</script>

Wenn Sie die Seite jetzt aktualisieren, wird die Emoji-Auswahl angezeigt. Jetzt müssen wir es schaffen, das Emoji im Eingabefeld festzulegen.

// callback function that will be called when an emoji is clicked from emoji picker
$("#emojis").picker(function (emoji) {
	// get the current cursor position on textarea field
	const cursorPosition = $("#textInput").prop("selectionStart")

	// get the current value of texarea field
	const value = $("#textInput").val()

	// check if cursor is at the end of the text
	if (cursorPosition == value.length) {
		// append the emoji at the end
		$("#textInput").val(value + emoji)
	} else {
		// if cursor is in between the text
		// then prepend the emoji before next character
		$("#textInput").val(value.replace(value[cursorPosition], emoji + value[cursorPosition]))
	}
})

Wir haben eine Single-Page-Chat-Anwendung im MEVN-Stack erstellt, in der wir diesen Emoji-Picker implementiert haben. Sie können dieses Projekt überprüfen Hier.


Beitragsaufrufe: 32

[ad_2]

Schlagwörter: , , , ,