输入框内输入一个字母,然后自动跳转到这个关键字母所在的位置比如A、B、C输入C后自动跳到C处

解决方案 »

  1.   

    自己修改了一个网上的,看看是不是你要的
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>搜索内容</title>
    <style type="text/css">
    <!--
    .chinese
    {
    position:absolute;
    width:200px;
    height:120px;
    left: 100px;
    top: 100px;
    }
    -->
    </style>
    </head><body><script language="JavaScript">function highlight()
    {
    var val = document.getElementsByName("guanjian")[0].value;
    // var key = key.split('|');
    for (var i=0; i<3; i++)
    {
    var rng = document.body.createTextRange();
    while (rng.findText(val))
    //rng.pasteHTML(rng.text.fontcolor('red'));
       rng.pasteHTML('<div style="border:1 solid red;display:inline"><a href="#" title='+ rng.text +'>' + rng.text + '</a></div>');
       }
    }/*
    createTextRange()主要是用来对一些文本对象进行操作。
    比如你有一大段文字,都在同一个P标签内,但是你只希望通过JS改变其中的一小部分,这时就可以用createTextRange来创建Range对象操作文本。
    因为默认情况下文本只是文本,并不是对象,要想像操作对象那样操作文本,只能是创建为Range对象。
    这时要操作的文本就具有了对象的功能和特性。
    *//*
    function highlight(key)
    {
    var key = key.split('|');
    for (var i=0; i<key.length; i++)
    {
    var rng = document.body.createTextRange();
    while (rng.findText(key[i]))
    //rng.pasteHTML(rng.text.fontcolor('red'));
    rng.pasteHTML('<div style="border:1 solid red;display:inline"><a href="#" title='+ rng.text +'>' + rng.text + '</a></div>');
    }
    }
    highlight('文章|关键|功能')
    */</script>
    <input type="text" name="guanjian" />
    <input type="button"  name="guanjian" value="搜索关键语句" onmouseover="over(this);" onmouseout="out(this);" onclick="highlight();" />
    <div class="chinese">中文功能重要文章</div>
    </body>
    </html>