javascript - 无法在光标位置的文本框中插入符号

Question

我旁边有一个文本框和一个编辑按钮，当我单击编辑按钮时，会出现一个包含符号按钮的弹出窗口。

然后，当您单击相应的符号时，它会出现在文本框中。但是，它会在单击相应的符号按钮时一个接一个地附加。我需要将符号插入到文本框中光标所在的位置。

HTML

<div class="col-md-3 col-xs-9 col-sm-9">
    <div class="input-group">
        <input type="text" class="form-control" id="symboltext"> 
            <span class="input-group-btn">
             <button class="btn btn-default" type="button" id="popbutton" data-placement="bottom" data-container="body">
         <span class="glyphicon glyphicon-edit"></span>
        </button>
        </span>
    </div>
</div>

JavaScript

    var popupElement = '<div class="btn-group" role="group"><button class="btn btn-sm btn-default" id="regbtn"><span class="glyphicon glyphicon-registration-mark"></button><button class="btn btn-sm btn-default" id="copyrightbtn"><span class="glyphicon glyphicon-copyright-mark"><span></button><button class="btn btn-sm btn-default" id="trademarkbtn"><sup>TM</sup></button></div>';

$('#popbutton').popover({
    animation: true,
    content: popupElement,
    html: true
});


$(document).on('click', "#trademarkbtn", function () {
    $("#symboltext").val($("#symboltext").val()+"\u2122 " );
});

$(document).on('click', "#regbtn", function () {
    $("#symboltext").val($("#symboltext").val()+"\u00AE ")
});

$(document).on('click', "#copyrightbtn", function () {
    $("#symboltext").val($("#symboltext").val()+"\u00A9 " )
});

Fiddle here

Answer 1

试试这个:-

创建函数获取光标位置

function textbox()
{
 var ctl = document.getElementById('symboltext');
 var startPos = ctl.selectionStart;
 var endPos = ctl.selectionEnd;
 return {s:startPos,e:endPos};
}

创建函数以在特定索引处插入值

function getVal(insert){
 var val=$("#symboltext").val();
 var index = textbox();
 val = val.slice(0,index.s) + insert + val.slice(index.s)
 return val;
}

这样调用函数

$(document).on('click', "#regbtn", function () {
 var val=getVal("\u00AE ");
 $("#symboltext").val(val);  
});

Demo