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”类时，“（或”）“应插入textarea中的光标位置。

如何在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，并在此处发布您的最少代码，然后我们（至少我）将为您提供审核或反馈，甚至是正确的解决方案。

线索：尝试对相关操作使用绑定，例如.click()或$(document).on('click', el, function(){})以及jquery的.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

如果我已正确理解您的要求，最初您的光标指针位于您的textarea内部，现在当您单击括号时，它应该被放置在您的指针位置。如果这是要求，那么就无法实现这一点，因为当您在textarea外部单击时，您在范围内的焦点位置会刷新到其他位置，简单来说，您的光标一次只能在一个位置。所以你需要修改你的要求。我建议你使用追加。

<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data"> 
    <p>Photo to Upload: <input type="file" name="photo" /></p> 
    <p>Your Email Address: <input type="text" name="email_address" /></p> 
    <p><input type="submit" name="Submit" value="Submit Form" /></p> 
</form>

将所选div插入textarea（光标位置）

3 个答案: