Javascript 将所选div插入文本区域（光标位置）_Javascript_Jquery_Html

Javascript 将所选div插入文本区域（光标位置）

javascript jquery html

Javascript 将所选div插入文本区域（光标位置）,javascript,jquery,html,Javascript,Jquery,Html,这是我的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">

这是我的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>

如果我正确理解了您的需求，那么最初您的光标指针位于文本区域内的某个位置，现在当您单击括号时，它应该被放置在指针位置。如果这是要求，那么就不可能实现这一点，因为当您在文本区域外单击时，您在范围内的焦点位置将刷新到其他位置，简单地说，您的光标一次只能在一个位置。因此，您需要修改您的需求。我建议你用append

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

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

请回复@Pankaj Makwana，并在这里发布您的最短代码，然后我们（至少我）将为您提供评论或反馈，甚至是正确的解决方案

线索：尝试在相关操作上使用绑定，例如

.click（）

或

$（文档）。例如，在jquery的（'click'，el，function（）{}）

和

.text（）

方法上。

请回答@Pankaj Makwana，并在此处发布您最不需要的代码，然后我们（至少我）将为您提供评论或反馈，甚至是一个正确的解决方案

提示：尝试在相关操作上使用绑定，例如

.click（）

或

$（document）.on（'click'，el，function（）{}）

，以及jquery的

.text（）

方法。

这对我很有效：）感谢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');
    });
});

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


这里有一些文字。
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））；
});

这对我很有效：）谢谢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');
    });
});

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


这里有一些文字。
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））；
});

到目前为止您尝试了什么？检查@PankajMakwana我已经在我的问题中添加了到目前为止我尝试过的内容。根据你的参考链接，我得到了正确的答案。我已经贴了。谢谢：）你刚才把答案加进去了吗？请不要——而是把它作为一个答案（就像其他人一样），如果这个答案比所有其他答案都好，那就接受你自己的答案。这样做没什么错，总比把两者都放在一段文字中制造混乱要好。@PeterB：不，我没有。这就是我之前尝试的代码。我已经用“添加答案”添加了我的答案，您到目前为止尝试了什么？检查@PankajMakwana我已经在我的问题中添加了我到目前为止尝试过的内容。根据你的参考链接，我得到了正确的答案。我已经贴了。谢谢：）你刚才把答案加进去了吗？请不要——而是把它作为一个答案（就像其他人一样），如果这个答案比所有其他答案都好，那就接受你自己的答案。这样做没什么错，总比把两者都放在一段文字中制造混乱要好。@PeterB：不，我没有。这就是我之前尝试的代码。我已经用“添加答案”添加了我的答案，请检查编辑的问题和答案。这不是最优的。我会写一个函数，而不是里面的重复代码。我已经看到了，它很有效-你做得很好！我比你高，就这样吧。这就是你需要的吗？请检查编辑后的问题和答案。这不是最优的。我会写一个函数，而不是里面的重复代码。我已经看到了，它很有效-你做得很好！我比你高，就这样吧。这就是您需要的吗？对于同一个问题，我使用$（textarea）.focus（）onclick of“（“或”）”来表示您的焦点位于text are中的某些文本中间的情况？如果是，请分享你的小提琴。我的回答可能是错误的。太好了，这是我提到的另一种方式，因为你可以看到你点击按钮前后光标的位置不一样。是的，它会在点击按钮后重新定位它的位置。然而，我无法解决这个问题。如果您知道任何解决方案，请提供帮助：）谢谢！这是不可能的，正如我在回答中提到的：）对于同一个问题，我使用$（textarea.focus（）onclick of“（“或”）”来表示您的焦点位于文本中的某个文本的中间？如果是，请分享你的小提琴。我的回答可能是错误的。太好了，这是我提到的另一种方式，因为你可以看到你点击按钮前后光标的位置不一样。是的，它会在点击按钮后重新定位它的位置。然而，我无法解决这个问题。Ple