如何替换textarea中的文本?

时间:2018-01-25 06:55:48

标签: javascript jquery

我需要在所选文本下方的文本区域内显示div。

使用Javascript:

dependency_links

这是我的plunker

我的要求是用星星替换文本,在textarea中选择文本时,必须在所选文本下方显示带有“***”的div,点击星星后必须用星号替换文本,div必须是隐藏文本被选中。

先谢谢。

1 个答案:

答案 0 :(得分:1)

您可以使用position: fixed作为div,并在开始选择时进行计算。选择文本后,使用jQuery offset方法设置其位置:

function getSel() {
    // obtain the object reference for the textarea>
    var txtarea = document.getElementById("mytextarea");
    // obtain the index of the first selected character
    var start = txtarea.selectionStart;
    // obtain the index of the last selected character
    var finish = txtarea.selectionEnd;
    //obtain all Text
    var allText = txtarea.value;

    // obtain the selected text
    var sel = Array(finish - start + 1).join("*");
    //append te text;
    var newText = allText.substring(0, start) + sel + allText.substring(finish, allText.length);
    txtarea.value = newText;
    
    $('#newpost').offset({top: 0, left: 0}).hide();
}

$(document).ready(function () {
    var position;
    $('#newpost').hide();
    $('#mytextarea').on('select', function (e) {
        $('#newpost').offset(position).show();
        var txtarea = document.getElementById("mytextarea");
        var start = txtarea.selectionStart;
        var finish = txtarea.selectionEnd;
        $('#newpost p').text(Array(finish - start + 1).join("*"));
    }).on('mousedown', function(e) {
        position = {top: e.pageY - 5, left: e.pageX};
    });
});
#mytextarea {width: 300px; height: 100px; overflow:hidden}
#newpost{position:fixed}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <textArea id="mytextarea"></textArea>
  <div id="newpost">
    <p onclick="getSel()">***</p>
  </div>
</body>