將所選的div插入文本區域（在光標位置）

Question

這是我的HTML

<div class="suggestion-box col-sm-12">
    <div class="col-sm-1 parantheses">(</div>
    <div class="col-sm-1 parantheses">)</div>
</div>
<br>
 <textarea class="entry-box col-sm-12" type="text">temp<20 && hum<10</textarea>

在任何“ parantheses”類上單擊時，應在文本區域的光標位置插入“（”或“）”。

如何在jquery中實現呢？ 瀏覽了幾篇帖子，其中只能在開頭/結尾插入自定義文本。 但是我的要求是不同的。

任何幫助將非常感激。 謝謝！

編輯：（此DID不起作用）

我已經根據Pankaj的參考鏈接發布了正確的答案。

function getCaret(el) {
    if (el.prop("selectionStart")) {
        return el.prop("selectionStart");
    } else if (document.selection) {
        el.focus();

        var r = document.selection.createRange();
        if (r == null) {
            return 0;
        }

        var re = el.createTextRange(),
            rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);

        return rc.text.length;
    }
    return 0;
};

function appendAtCaret($target, caret, $value) {
    var value = $target.val();
    if (caret != value.length) {
        var startPos = $target.prop("selectionStart");
        var scrollTop = $target.scrollTop;
        $target.val(value.substring(0, caret) + ' ' + $value + ' ' + value.substring(caret, value.length));
        $target.prop("selectionStart", startPos + $value.length);
        $target.prop("selectionEnd", startPos + $value.length);
        $target.scrollTop = scrollTop;
    } else if (caret == 0) {
        $target.val($value + ' ' + value);
    } else {
        $target.val(value + ' ' + $value);
    }
};

$('textarea').each(function() {
    var $this = $(this);
    $this.click(function() {
        //get caret position
        var caret = getCaret($this);

        //append some text
        appendAtCaret($this, caret, 'Some text');
    });
});

Answer 1

請回答@Pankaj Makwana，並在此處張貼您最少的代碼，然后我們（至少我）會為您提供評論或反饋，甚至是正確的解決方案。

提示：嘗試對相關動作使用綁定，例如$(document).on('click', el, function(){}) .click()或$(document).on('click', el, function(){})和.text()方法。

Answer 2

這對我有用：)感謝Pankaj提供的參考鏈接。

<html>
<body>
<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn-open" value="(" />
<input type="button" id="btn-close" value=")" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


</body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
 jQuery("#btn-open").on('click', function() {
 $("#txt").focus();
        var $txt = jQuery("#txt");
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = "(";
        $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
    });
    jQuery("#btn-close").on('click', function() {
    $("#txt").focus();
        var $txt = jQuery("#txt");
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = ")";
        $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
    });
    </script>
</html>

Answer 3

如果我正確地理解了您的要求，最初您的光標指針是在文本區域內的某個位置，現在當您單擊括號時，它應該放在您的指針位置。 如果這是必需的，那么就不可能實現這一點，因為當您在文本區域之外單擊時，示波器中的焦點位置會刷新到其他位置，簡單地說，您的光標一次只能位於一個位置。 因此，您需要修改您的需求。 我建議您使用追加。

eg. abcd(append your parenthesis here "(" ) start text for paranthesis(" close your parenthesis here")" )

將所選的div插入文本區域（在光標位置）

問題描述

3 個解決方案

解決方案1
1 2017-07-11 06:57:36

解決方案2
1 已采納 2017-07-11 07:06:08

解決方案3
0 2017-07-11 06:55:02

將所選的div插入文本區域（在光標位置）

問題描述

3 個解決方案

解決方案1 1 2017-07-11 06:57:36

解決方案2 1 已采納 2017-07-11 07:06:08

解決方案3 0 2017-07-11 06:55:02

解決方案1
1 2017-07-11 06:57:36

解決方案2
1 已采納 2017-07-11 07:06:08

解決方案3
0 2017-07-11 06:55:02