Question

我之前已经就堆栈溢出问了这个问题，但没有得到答案。我有2个链接叫做添加表情符号1并添加表情符号2。这是我的早期问题。 Insert smiley at cursor position

现在，即使我做了一些改变，问题在于笑脸只插入div的末尾而不是光标位置。我的新演示位于：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"/>' );
});

我希望笑脸插入光标所在的各自的div中。提前谢谢。

Note: I had a contenteditable div where I want to add image and not in the textarea.

Answer 1

请查看下面的代码行来解决您的查询。

function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //MOZILLA and others
    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;
    }
}

这可能是Insert text into textarea at cursor position (Javascript)

的副本

请查看以上链接了解详情

Answer 2

我已经测试了此代码的文本框，其id为txtUserName.Its正常工作

<强>代码：

$(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);
    });

在光标处插入表情符号

2 个答案: