在按键上突出显示 HTML 元素中的字符答案

【问题标题】：Highlighting characters in an HTML element on keypress在按键上突出显示 HTML 元素中的字符
【发布时间】：2013-08-13 12:25:15
【问题描述】：

我正在尝试使用 jQuery 用 javascript 制作打字游戏，但遇到了一个问题。

如何在用户键入时突出显示用户键入的字符？

我的 div 中有示例

 <div id="theWord">tjurkey</div>

当用户开始输入"tj.." 时，它应该在输入时突出显示t，然后是j。目前我被困在这里：

 $("body").keypress(function(e) {
if (e.which !== 0) {
    var t = String.fromCharCode(e.which);
     if ( t != undefined){ wordContainer += t.replace("undefined",""); }
        if ( wordContainer == theWord){
            alert("You typed the word" + theWord);
        }
}
});

例如。这个词是“Tjurkey”，如果用户开始输入 P 它不应该突出任何东西，因为它是 TJurkey 而不是 P。

如果用户以“T”开头，它应该像 Tjurkey 一样突出显示“T”，如果用户在之后输入“a”，它不应该突出显示它，因为这个词是 Tjurkey 而不是 Ta....然后用户输入 j 它应该突出显示 j，因为这个词是 TJ...urkey.. 明白了吗？

【问题讨论】：

您想突出显示在#theWord 中输入的当前字符？
我认为（但我可能错了）你应该把这个词分成跨度。
用户在输入什么？您要应用哪种突出显示方式？
我想，当用户输入“t”时（theWord-container中单词的第一个字母突出显示“t”，因为用户已经输入了它。
我认为这可能会有所帮助stackoverflow.com/a/7959156/1696560

标签： javascript jquery html

【解决方案1】：

演示：http://jsfiddle.net/cVaHb/

var $target = $('#theWord'),
    t = ''
$("body").keypress(function(e) {
if (e.which !== 0) {
    t += String.fromCharCode(e.which);
    var text = $target.text(),
        pos = text.search(t);
    if(pos > -1){
        $target.html(
            text.substring(0,pos)
            +'<span class="highlight">'+t+'</span>'
            +text.substring(pos+t.length)
        );      
    }else{
        $target.text(text);
    }
}
});

CSS：

.highlight {
    background: yellow;
}

编辑：如果你想忽略错误的字母，你可以使用

var $target = $('#theWord'),
    t = ''
$("body").keypress(function(e) {
if (e.which !== 0) {
    var newt = t + String.fromCharCode(e.which);
    var text = $target.text(),
        pos = text.search(newt);
    if(pos > -1){
        t = newt;
        $target.html(text.substring(0,pos)+'<span class="highlight">'+t+'</span>'+text.substring(pos+t.length));      
    }
}
});

演示：http://jsfiddle.net/cVaHb/1/

【讨论】：

如果我输入错误，它应该忽略，而不是重新启动整个事情。你能修好它吗？尝试输入 Tju.... 然后输入 a，然后它会重置它，它应该忽略它，然后当我输入 r（又是下一个字母）时，它应该再次突出显示。
@jesper 我已经修好了。但我不确定您是否想要这种行为：当您输入（例如）u 时，u 会突出显示，即使您没有输入 t 和 j

【解决方案2】：

在这里，让您开始

var t = "";
var word = $("#theWord").text();
   $("body").keypress(function (e) {
       if (e.which !== 0) {
           t += String.fromCharCode(e.which);
           if (word.substring(0, t.length) == t) {
                $("#theWord").html("<span class='highlight'>" + t +"</span>"+ word.substring(t.length));               
            }
           else
           {
               t=t.substring(0,t.length - 1);               
           }
       }
   });

在这里查看：

http://jsfiddle.net/zahirdhada/UBbF7/1/

【讨论】：

如果我输入错误，它应该忽略，而不是重新启动整个过程。你能修好它吗？尝试输入 Tju.... 然后输入 a，然后它会重置它，它应该忽略它，然后当我输入 r（又是下一个字母）时，它应该再次突出显示。

【解决方案3】：

您可以获取键入的字符并在字符串中找到这些字符的起点和终点。然后你必须用 span

包装该文本

ex: 如果用户输入 tj 你应该写一个脚本来填充

<div id="theWord"><span style="color:red">tj</span>urkey</div>

【讨论】：