使用javascript按下开始按钮时，我应该如何突出显示textarea中的文本？

Posted 2023-05-07

【中文标题】使用javascript按下开始按钮时，我应该如何突出显示textarea中的文本？

【英文标题】：How should i highlight a text in textarea when press start button using javascript?

【发布时间】：2015-08-15 21:54:58

【问题描述】：

我是 javascript 的初学者。

有人可以帮我吗？

当按下星号按钮时，如何用背景突出显示 Textarea 的文本。当点击停止时，光标应该以突出显示的背景停止。

当按下停止按钮时，它会显示字数，行数。

例如：

按下两个按钮之间的时间将为我们提供用户阅读所需的时间。 并且因为文本区域有字数，可以计算出“阅读速度” 例如： 每分钟 120 个单词，即每秒 2 个单词。 10分钟1200字。

我是这样计算的。 假设书页通常具有： 30 行 * 每行 8 个字 也就是每页 240 个字 时间 600 页 总共有 144,000 个单词 除以每分钟 120 字的阅读速度 也就是 1200 分钟 每小时除以 60 分钟：20 小时

以下链接与我的问题有关。但是文本已将文本突出显示到另一个文本区域中。我想突出显示同一文本框中的文本。

How to highlight text in TextArea

这是我的html代码：

<div id="startbtn">
<button id="start" onclick="startHighlight()">Start!</button>
</div>
<div id="stoptbtn">
<button id="stop" onclick="stopHighlight()">Stop!</button>
</div>        
<div id="container">
<textarea id="inputText"></textarea>
</div>

【问题讨论】：

“突出显示”是指“选择”吗？ “光标”是指“插入符号”吗？光标是鼠标指针。您没有显示您尝试过的任何代码，并且您链接到的答案是“您不能这样做”。

***.com/questions/5797539/…请参考这里。

嗨@raz。按开始按钮时，一一选择单词。

哇...好问题...使用阅读所需的时间。

他基本上想要一个阅读模拟，从按下“开始按钮”开始 -> 触发的事件应该逐字突出显示，直到按下“停止按钮”。之后，突出显示的单词应该一起计算，并且应该解析出经过的时间

【参考方案1】：

最新更新： 阅读模拟器现在根据用户输入速度和单词长度读取每个单词，以提供更真实的阅读流程。 https://jsfiddle.net/8Lwm6gh1/40/

js的源代码：

更新代码

  $('#sim').each(function()
    this.contentEditable = true;
);

var go = $('#go');
var stop = $('#stop');
var wordCount = 0;
var wordCountBox = $('#wordCountBox');
var timepassed = $('#timepassed');
var textRead = $('#textRead');
var small = $('small');


go.on("click", function(e)
    e.preventDefault();
    startSim();
);

function startSim()
    var speed = $('#speed').val();
    timeStart = $.now();
    var sim = $('#sim').text();
    var wordArray = sim.split(" ");
    var simWrap = $('#sim');
    var loopCount = 0;

    var arrCount = wordArray.length;
    var alreadyRead = [];
    loopDat();
    var i = loopCount;    
    function loopDat()
            var pos = loopCount;
            var realSpeed = wordArray[pos].length;
            realSpeed = (realSpeed * (speed / 5));
            // realSpeed = Math.round((realSpeed * 0.1) * speed);
            console.log('Reading speed of current word: '+realSpeed);
            if(loopCount == pos)
                setTimeout(function()  
                    if(pos < 0)
                        pos = 0;
                    
                    alreadyRead.push(wordArray[pos]);
                    wordArray[pos] = '<b>'+wordArray[pos]+'</b>';
                    small.text('Current reading speed: '+realSpeed);
                    var words = wordArray.join(" ");
                    simWrap.html(words);                
                    wordCount++;
                    if(pos == (arrCount - 1))
                        triggerDone();
                    
                    loopCount++;
                    if(loopCount < arrCount)
                        loopDat();
                    
                , realSpeed);
            
    
    // Function done
    function triggerDone()
        wordCountBox.text('Words counted: '+wordCount);
        var timeEnd = $.now();
        var timeRes = timeEnd - timeStart;
        timeRes = parseInt(timeRes);
        timeRes = timeRes / 1000;
        timepassed.text(timeRes+" seconds have passed");
        alreadyRead = alreadyRead.join(" ");
        textRead.text(alreadyRead);
        var summary = $('#summary');
        summary.show();
        return;
     
    stop.on("click", function(e)
        e.preventDefault();
        triggerDone();
    );

【讨论】：

嗨@noa-dev，首先，感谢您的回复。它仅在 JSfiddle 中工作。无法在浏览器中运行。

它也可以在浏览器中使用——在这种情况下我使用的是 jquery。 google jquery 并在脚本之前将其实现到您的

是的，现在工作很酷。谢谢@noa-dev。当我使用超过 100 个单词时，溢出单词。最好是textarea，但是当我使用textarea时，字数只显示1。

如果文本框现在有太多文本，文本框会出现滚动条。 jsfiddle.net/8Lwm6gh1/38 PS下次当您提出问题时，请先尝试使用基本的 javascript 教程等自己解决问题 - 除了我的以外，您没有得到任何答案，因为您自己所做的只是编写一个需要 1 分钟的 html 标记；）

好的。谢谢你我添加了溢出：自动；在#sim 类中。现在好了。