Question

使用jquery点击弹出窗口内的符号时，无法在文本框中添加符号。

在文本框附近点击编辑符号，会出现包含符号按钮的弹出窗口。

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

$("#regbtn").click(function () {
    $("#symboltext").append("&#174;");
});

$("#copyrightbtn").click(function () {
    $("#symboltext").append("&#169;");
});

$("#trademarkbtn").click(function () {
    $("#symboltext").append("&#8482;");
});

Fiddle here

Answer 1

$("symboltext")

没有#选择器尝试更改为

$("#symboltext")

此外，按钮是动态生成的，因此请使用

$(document).on('click', "#trademarkbtn", function () {

修改：Updated Fiddle

Answer 2

最后我能回答我的问题：）

感谢@ A.Wolff和@ahervin的输入

<强> 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>';
var lastPoint = 0;
$('#popbutton').popover({
    animation: true,
    content: popupElement,
    html: true
});

function textbox() {
    var ctl = document.getElementById('symboltext');
    var startPos = ctl.selectionStart;
    var endPos = ctl.selectionEnd;
    lastPoint = startPos;
    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)
    lastPoint += 2;
    return val;
}

$(document).on('click', "#trademarkbtn", function () {
    var val = getVal("\u2122");
    var input = $("#symboltext");
    input.val(val).focus();
    input[0].selectionStart = input[0].selectionEnd = lastPoint;
});


$(document).on('click', "#regbtn", function () {
    var val = getVal("\u00AE");
    var input = $("#symboltext");
    input.val(val).focus();
    input[0].selectionStart = input[0].selectionEnd = lastPoint;
});

$(document).on('click', "#copyrightbtn", function () {
    var val = getVal("\u00A9");
    var input = $("#symboltext");
    input.val(val).focus();
    input[0].selectionStart = input[0].selectionEnd = lastPoint;
});

Updated fiddle here

如何在单击相应按钮时将特殊符号附加到文本框

2 个答案: