突出显示textarea中的文本延迟

Question

我试图突出显示带有时间延迟的<textarea>中的单行文本。我想知道如果我可以选择不同的颜色？我想要的是当我点击第一个<button>时，第一行高亮显示为蓝色，点击第二个<button>，1秒后，第二行高亮显示为蓝色，最后点击第二个<button>，第二秒后，第三行高亮显示为黄色。我注意到我有一个错误，我点击了按钮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>