Question

我正在尝试使用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”开头，则应突出显示“T”，如Tjurkey，如果用户输入“a”，则不应突出显示它，因为单词是Tjurkey而不是Ta ....用户然后键入j它应该高亮j，因为这个词是TJ ... urkey ..得到了点？

Answer 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/

Answer 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/

Answer 3

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

包装该文本

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

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

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

3 个答案: