javascript - 延迟突出显示文本区域中的文本

Question

我试图突出显示 <textarea> 中的单行文本随着时间的延迟。我想知道我是否可以选择不同的颜色？我想要的是当我点击第一个 <button> ，第一行高亮成蓝色，点击第二行<button> , 1秒后，第二行高亮成蓝色，最后点击第三行<button> , 2 秒后，第三行高亮显示为黄色。我注意到我有一个错误，我点击了按钮 3 次，然后突出显示不起作用，但对我来说没关系，我只想知道如何使时间延迟并用不同的颜色突出显示。非常感谢。

$( document ).ready(function() {
  var str = 'line 1\nline 2\nline 3\n';
  var textNumChar = str.length;
  $('#str').val(str);
  
  startPosition = 0;
  $(".lines").click(function() {
    var tarea = document.getElementById('str');
    for(i=startPosition;i<textNumChar;i++)
    {
        if(str[i]=='\n') {
            endposition = i;
            break;
        }
    }
    tarea.selectionStart = startPosition;
    tarea.selectionEnd = endposition;
    startPosition = endposition+1;
  });
});

#container {
    float: left;
}
button {
    width: 50px;height: 30px;
}

 <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<div id="container">
  <button class="lines" id="line1">line 1</button>
  <br>
  <button class="lines"  id="line2">line 2</button>
  <br>
  <button class="lines"  id="line3">line 3</button>
</div>
<textarea id="str" rows="6"></textarea>

Answer 1

您可以使用 setTimeout() 根据 button id 设置突出显示文本的延迟。

和 ::selection CSS 选择器来设置被选元素部分的样式。

$( document ).ready(function() {
  var str = 'line 1\nline 2\nline 3\n';
  var textNumChar = str.length;
  $('#str').val(str);
  
  startPosition = 0;
  $(".lines").click(function(e) {
    var tarea = document.getElementById('str');
    for(i=startPosition;i<textNumChar;i++)
    {
        if(str[i]=='\n') {
            endposition = i;
            break;
        }
    }
    
    var time = 0;
    var tar_id = e.target.id;
    var colors;
    if(tar_id == 'line1' ) {  colors = 'red'; }
    else if(tar_id == 'line2' ) { time = 1000; colors = 'blue'; }
    else if(tar_id == 'line3' ) { time = 2000; colors = 'green'; }
    
    setTimeout(function(){
      tarea.selectionStart = startPosition;
      tarea.selectionEnd = endposition;
      startPosition = endposition+1;
      $('body').addClass(colors);
    }, time);
  });
});

#container {
    float: left;
}
button {
    width: 50px;height: 30px;
}

.red ::selection {
    color: red;
    background: yellow;
}
.blue ::selection {
    color: blue;
    background: red;
}
.green ::selection {
    color: green;
    background: blue;
}

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<div id="container">
  <button class="lines" id="line1">line 1</button>
  <br>
  <button class="lines"  id="line2">line 2</button>
  <br>
  <button class="lines"  id="line3">line 3</button>
</div>
<textarea id="str" rows="6"></textarea>