Question

我有一个场景，在textarea中，当我选择一些文字时，文字必须用星号代替。

使用Javascript：

    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).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).join("*"));
    }).on('mousedown', function (e) {
        position = { top: e.pageY-5, left: e.pageX };
    });
    $('#newpost').hide();
     });

这是我的plunker

这里的空间一定不能被替换，我在计算文本时遇到问题（即有些时候文本计数与开始计数不同）。更换后，再次更换的星星在选择时不得更换。

先谢谢。

Answer 1

以下是您查询的解决方案：

由于点击时调用了事件，所选文本的计数不正确。因此，在选择文本之前单击事件已触发。并且当时选择的文本数量，它将返回该数字。

解决方案：使用Mouse Up事件处理程序而不是单击

Google Calendar API

Answer 2

function getSel() {
  var txtarea = document.getElementById("mytextarea");
  var start = txtarea.selectionStart;
  var finish = txtarea.selectionEnd;
  //obtain all Text
  var allText = txtarea.value;
  var ltext = allText;
  // obtain the selected text
  for (var i = start; i < finish; i++) {
    if (allText.charAt(i) != " ") {
      ltext = replaceAt(ltext, i, "*");
    }
  }

  txtarea.value = ltext;

  $('#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).join("*"));
  }).on('mousedown', function(e) {
    position = {
      top: e.pageY - 5,
      left: e.pageX
    };
  });
  $('#newpost').hide();
});

// replace the 'n'th character of 's' with 't'
function replaceAt(s, n, t) {
  return s.substring(0, n) + t + s.substring(n + 1);
}

#mytextarea {
  width: 300px;
  height: 100px;
  overflow: hidden
}

#newpost {
  position: absolute;
  top: 400px;
}

input:button {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textArea id="mytextarea"></textArea>
     <input type="button" onclick="getSel()" value="click"/>
    <div id="newpost">
        
    </div>

空间不得更换

2 个答案: