1

我正在尝试使用 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.. 明白了吗？

4

3 回答 3

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/

于 2013-08-13T12:36:45.850 回答
1

在这里，让你开始

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/

于 2013-08-13T12:37:49.277 回答
0

您可以获取键入的字符并在字符串中找到这些字符的起点和终点。然后你必须用跨度包装那个文本

例如：如果用户键入 tj，您应该编写一个脚本来填充

<div id="theWord"><span style="color:red">tj</span>urkey</div>
于 2013-08-13T12:31:21.057 回答