Insert the chosen div into textarea (at cursor position)

Question

Here is my 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>

When clicked on any of the "parantheses" classes, "(" or ")" should get inserted at the cursor position in the textarea.

How can this be achieved in jquery? Looked through few posts where a custom text can be inserted at the beginning/end only. But my requirement is different.

Any help would be much appreciated. Thank you!

Edit: (This DID NOT work)

I have posted the right answer based on Pankaj's reference link.

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

Check [this](https://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery) — Prashant Shirke, Jul 11 '17 at 06:53
@PankajMakwana I have added what I tried so far in my question. I got the answer right based on your reference link. I have posted it. Thank you :) — we bendthetrend, Jul 11 '17 at 07:09
Did you just add the answer *into* the question? Please don't - instead make it an Answer (just like anybody else would), and if that Answer is better than all others, accept your own Answer. Nothing wrong with doing so, and better than creating possible confusion by putting both into one piece of text. — Peter B, Jul 11 '17 at 07:16
@PeterB :No, I did not. Thats the code for what I tried previously. I have added my answer with "Add Answer" — we bendthetrend, Jul 11 '17 at 07:18
@PeterB : Just in case you missed it, I have mentioned "This did not work" in bold :) — we bendthetrend, Jul 11 '17 at 07:26

buzz8year · Answer 1 · 2017-07-11T07:13:12.263

1

Please answer to @Pankaj Makwana, and post your least code down here, then we (me at least) would provide you a review or feedback, or even a right solution.

Clue: try to use binding on relevant actions, such as .click() or $(document).on('click', el, function(){}), and .text() methods of jquery for instance.

edited Jul 11 '17 at 07:13

answered Jul 11 '17 at 06:57

buzz8year

304
4
13

Please check the edited question & answer too. It is not optimal. Ill write a function instead of the duplicate code in there. – we bendthetrend Jul 11 '17 at 07:10
I ve seen, it works - you ve done well! I ve upvoted you, keep it this way. Is that wht you needed? – buzz8year Jul 11 '17 at 07:12

score 1 · Accepted Answer · answered Jul 11 '17 at 07:06

This worked for me :) Thanks Pankaj for the reference link.

<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>

score 0 · Answer 3 · answered Jul 11 '17 at 06:55

0

If i have understood your requirement correctly, Initially your cursor pointer is some where inside your textarea, and now when you click on parenthesis it should be get placed at your pointer position. If this is the requirement then it is not possible to achieve this, because when you click outside the textarea your focus position in the scope get refreshed to some other place, in simple words your cursor can be only at one position at a time. So you need modify your requirement. i suggest you use append.

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

answered Jul 11 '17 at 06:55

anujayk

544
7
31

For the same issue, I have used $(textarea).focus() onclick of "(" or ")" – we bendthetrend Jul 11 '17 at 07:12
for the case when your focus is in middle of some text in text are ? if yes please share your fiddle. My be i took the question in wrong way. – anujayk Jul 11 '17 at 07:17
Great, this is the other way what i mentioned, since you can see your cursor position is not same before and after you click the button. – anujayk Jul 11 '17 at 07:23
Yes, it relocates its position after the button click. However, I could not fix that. Please help if you are aware of any solution :) Thanks! – we bendthetrend Jul 11 '17 at 07:25
This is not possible, what i mentioned in my answer :) – anujayk Jul 11 '17 at 07:27

Insert the chosen div into textarea (at cursor position)

3 Answers3