1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Cursor position in textarea on insert

Discussion in 'JavaScript' started by qwikad.com, Jun 19, 2019.

  1. #1
    I am working on a little emoji function. My problem is when I have a text in the textarea and select an emoji from the drop down the emoji always goes to the end of the text even if I place the cursor at the beginning of the text, the emoji will go to the end of the text like so:

    Some text here 2.gif

    The code:
    SEMrush
    function insertSmiley(smiley)
    {
    var currentText = document.getElementById("textarea");
    var smileyWithPadding =" "+ smiley +" ";
    currentText.value += smileyWithPadding;
    currentText.focus();
    }
    
    Code (markup):
    I tried to remove currentText.focus(); but it didn't help. I also tried to use jQuery to keep the textarea's focus but the emoji would still go to the end of the text:

    $(window).load(function()
    {
    var lastFocus;
    $("#dropdown-emojis").mousedown(function(e)
    {
    return false;
    });
    });
    
    Code (markup):
    How can I make the emoji to show at the place where I place the cursor?
     
    qwikad.com, Jun 19, 2019 IP
    SEMrush
  2. NetStar

    NetStar Notable Member

    Messages:
    2,266
    Likes Received:
    467
    Best Answers:
    21
    Trophy Points:
    215
    #2
    Your first example uses "currentText.value += smileyWithPadding;". This will only append your inserted text.

    Use this

    
    function insertSmiley(smiley) {
        var el = document.getElementById("currentText");
        var smileyWithPadding = " " + smiley + " ";
    
        var val = el.value, endIndex, range, doc = el.ownerDocument;
    
        if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number")
        {
            endIndex = el.selectionEnd;
            el.value = val.slice(0, endIndex) + smiley + val.slice(endIndex);
            el.selectionStart = el.selectionEnd = endIndex + smiley.length;
        }
        else if (doc.selection != "undefined" && doc.selection.createRange)
        {
            el.focus();
            range = doc.selection.createRange();
            range.collapse(false);
            range.text = smiley;
            range.select();
        }
    }
    Code (JavaScript):
    and the html

    
    <form>
        <textarea id="currentText" cols="40" rows="3"></textarea>
        <input type="button" onclick="insertSmiley('blah');" value="Insert" />
    </form>
    HTML:
    This will insert the text where the cursor is... However, this will NOT replace selected text. You'll have to add a couple extra lines of code for that. I can't think of a logical reason why someone may want to override regular text with a smiley though so that decision of functionality is up to you.
     
    NetStar, Jun 19, 2019 IP
    qwikad.com likes this.
  3. sarahk

    sarahk iTamer Staff

    Messages:
    25,183
    Likes Received:
    3,428
    Best Answers:
    100
    Trophy Points:
    665
    #3
    Your code is telling it to put the emoji at the end so it's doing what you ask.

    Instead you need to get the cursor position
    var cursorPosition = $('#myTextarea').prop("selectionStart");
    Code (javascript):
    and then take currentText.value and split it into 2 using cursorPosition and put them back together with the emoji in the middle
     
    sarahk, Jun 19, 2019 IP
    qwikad.com likes this.
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,852
    Likes Received:
    1,085
    Best Answers:
    22
    Trophy Points:
    400
    #4
    Shoot. I waited for a reply earlier, then I just went ahead and found a jQuery solution:

    
    $(window).load(function(){
    $( 'input[type=button]' ).on('click', function(){
    var cursorPos = $('#textarea').prop('selectionStart');
    var v = $('#textarea').val();
    var textBefore = v.substring(0, cursorPos );
    var textAfter = v.substring( cursorPos, v.length );
    $('#textarea').val( textBefore+ " " + $(this).val() + " " +textAfter );
    });
    });
    
    Code (markup):
    And the submit buttons (icons) became:
    <input type="button" class="face_smile" value="&#128515;" onclick="$('#emoji_container').hide();">
    etc.
    Code (markup):
    I may test your solution NetStar at some point, since I would prefer to have it in pure javascript.
     
    qwikad.com, Jun 19, 2019 IP
  5. NetStar

    NetStar Notable Member

    Messages:
    2,266
    Likes Received:
    467
    Best Answers:
    21
    Trophy Points:
    215
    #5
    Make sure it's cross browser capable... The example I gave actually does it 2 different ways for IE browsers and for all others...
     
    NetStar, Jun 20, 2019 IP
    sarahk likes this.