1

jQueryを使用してjavascriptでタイピングゲームを作ろうとしていますが、問題に直面しています。

ユーザーが入力した文字を強調表示するにはどうすればよいですか?

私のdivに例があります

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

ユーザーが入力を開始すると、入力時に、次に"tj.."が強調表示されます。現在、私はここで立ち往生しています：tj

 $("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 と入力し始めても、P ではなく TJurkey であるため、何も強調表示されません。

ユーザーが最初に「T」と入力すると、Tjurkey のように「T」が強調表示されます。その後に「a」と入力すると、単語が Ta ではなく Tjurkey であるため、強調表示されません。 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 に答える