Place the emoji where the cursor is located

Question

Place the emoji where the cursor is located

My query was already posted on stack overflow but unfortunately, I did not receive a response. The issue revolves around 2 links named "add emoji 1" and "add emoji 2". As mentioned earlier, my question can be accessed here: Insert smiley at cursor position

Despite implementing some changes, the problem persists as emojis are only added at the end of the div rather than at the cursor's position. For reference, you can check out my latest demo here: https://jsfiddle.net/ftwbx88p/8/

$( document ).on( "click" , "#button" , function() {
   $( ".editable.focus" ).append( '<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>' );
});

It is crucial that the emojis are inserted into the respective contenteditable div wherever the cursor is placed. Any assistance is greatly appreciated.

Note: In my scenario, it is essential that the image is incorporated within the contenteditable div rather than the textarea.

jquery html css

Answer 1

Answer №1

I have successfully tested the following code snippet for updating text in a textbox with the ID txtUserName, and it functions as intended.

Code:

$(document).on("click", "#button1", function () {
        var cursorPosition = $("#txtUserName")[0].selectionStart;
        var FirstPart = $("#txtUserName").val().substring(0, cursorPosition);
        var NewText = " New text ";
        var SecondPart = $("#txtUserName").val().substring(cursorPosition + 1, $("#txtUserName").val().length);
        $("#txtUserName").val(FirstPart+NewText+SecondPart);
    });

Answer 2

I have successfully tested the following code snippet for updating text in a textbox with the ID txtUserName, and it functions as intended.

Code:

$(document).on("click", "#button1", function () {
        var cursorPosition = $("#txtUserName")[0].selectionStart;
        var FirstPart = $("#txtUserName").val().substring(0, cursorPosition);
        var NewText = " New text ";
        var SecondPart = $("#txtUserName").val().substring(cursorPosition + 1, $("#txtUserName").val().length);
        $("#txtUserName").val(FirstPart+NewText+SecondPart);
    });

Answer 3

Answer №2

If you're looking for a solution to your question, take a look at the code snippet below.

function insertAtCursor(myField, myValue) {
    //For IE
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //For MOZILLA and other browsers
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
}

This could be considered a duplicate of Insert text into textarea at cursor position (Javascript)

We recommend checking out the above link for more information

Answer 4

If you're looking for a solution to your question, take a look at the code snippet below.

function insertAtCursor(myField, myValue) {
    //For IE
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //For MOZILLA and other browsers
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
}

This could be considered a duplicate of Insert text into textarea at cursor position (Javascript)

We recommend checking out the above link for more information

Place the emoji where the cursor is located

Answer №1

Answer №2

Similar questions

What is the best way to place a list within a <div> element?

"Revolutionizing Social Media Interaction with jQuery Ajax Like System

Attempting to dynamically update the image source from an array when a click event occurs in a React component

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

The jQuery half rating by Chris Richards is a game-changer in the world

Ways to display and conceal a div when hovering over another div

Retrieve user choices from dropdown menu with Flask and HTML

Save the outcome of an ArrayBuffer variable into an array within a Javascript code

Can multiple links be hrefed at the same time?

unexpected alteration of text sizing in mathjax within reveal.js presentations

Can a horizontal navigation bar be designed to span the full width of the page without relying on a table?

The SVG path is not aligned properly with the container's viewbox dimensions

Ajax immediately going to the error section

Exploring depths with nested ng-Repeat in Depth First Search

Attach an event listener to the HTML content

What is the best way to implement a secondary sticky navbar that appears on scroll of a specific section, positioned below the primary fixed-top navbar, using jQuery and Bootstrap 5?

Transferring information from website form to a C# program

Choose a specific element by referencing the attribute of another element

As a Java developer, I am currently facing challenges with mastering jQuery

JavaScript Bingo Game - Create Interactive Cell Selection