jquery根据文本名称跳到指定位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery根据文本名称跳到指定位置相关的知识,希望对你有一定的参考价值。

比如我输入z,光标能够跳转到红色区域

写了一个,你需要稍加修改,我用的是table,你把td里面放input,光标应该可以自动选择:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js</title>
<script type="text/javascript" src="/6rooms/html/js/jquery.js"></script>
<style> 
td width: 200px; border: 1px solid #ccc;
table margin: 100px auto; 
.selected background: red;
</style>
</head>
<body>
    <label for="word">输入一个字母:</label>
    <input id="word" type="text" >
    <span>注意:a-z中的其中一个</span>
<table >
    <tr>
        <td id="a">a</td>
        <td id="k">k</td>
        <td id="u">u</td>
    </tr>
    <tr>
        <td id="b">b</td>
        <td id="l">l</td>
        <td id="v">v</td>
    </tr>
    <tr>
        <td id="c">c</td>
        <td id="m">m</td>
        <td id="w">w</td>
    </tr>
    <tr>
        <td id="d">d</td>
        <td id="n">n</td>
        <td id="x">x</td>
    </tr>
    <tr>
        <td id="e">e</td>
        <td id="o">o</td>
        <td id="y">y</td>
    </tr>
    <tr>
        <td  id="f">f</td>
        <td id="p">p</td>
        <td id="z">z</td>
    </tr>
    <tr>
        <td>g</td>
        <td>q</td>
        <td></td>
    </tr>
    <tr>
        <td>h</td>
        <td>r</td>
        <td></td>
    </tr>
    <tr>
        <td>i</td>
        <td>s</td>
        <td></td>
    </tr>
    <tr>
        <td>j</td>
        <td>t</td>
        <td></td>
    </tr>
</table> 
<script type="text/javascript">
    var word = $('#word');
    var tvalue = $('td').text();
    var reg = /^[a-zA-Z]$/;
    $('#word').change(function(event) 
        /* Act on the event */
        if (!reg.test(word.val())) 
            alert("输入有误!");
            return false;
        
        //console.log(tvalue[1]);
        for (var i = 0; i < tvalue.length; i++) 
            if (tvalue[i]==word.val()) 
                $('td').removeClass('selected').blur();
                $('#'+word.val()).addClass('selected').focus();
            
        ;
    );
    
</script>
</body>
</html>

参考技术A // 根据输入文本input 
function selectByText(input)
// 取所有td
var tds = $("td");
// 迭代所有td
tds.each(function()
// 去掉所有红色区域效果
this.style.backgroundColor="";
// 如果为输入的文本input
if(this.innerHTML == input)
// 设置为红色区域效果
this.style.backgroundColor="red";
);

本回答被提问者和网友采纳
参考技术B 你的html文档结构是个啥样?

jQuery如何根据输入到文本框的关键字查询页面内容、然后把相关的内容全部显示到list中、

点击list中的内容可以直接跳转到页面的相关位置
文本框输入Emma、进行查询、然后把文中查询到Emma全部同时添加显示在右边的list中(例:所有的红色Emma)点击list中所添加的Emma、分别跳转到不同的位置

给你个思路:
搜索方法里用正则表达式找到匹配字符串的位置然后加入一个红色的节点<font name='reg0' color='red'>匹配的文字</font>(name是你动态产生的),并添加一个超链接到右边的list中,超链接中的href='#reg0'就可以了~
参考技术A 问题有点乱不大明白你的意思~
最好要有实际的例子~!
参考技术B 你说的应该是类似百度一样的搜索吧,输入内容有一个下拉框,然后显示内容,点击即可跳转?? 参考技术C 请问你实现了吗?能发一个例子到我邮箱里吗?

以上是关于jquery根据文本名称跳到指定位置的主要内容,如果未能解决你的问题,请参考以下文章

如何让jquery动画效果在屏幕滚动到指定位置才执行

如何用jquery实现页面滚动到指定位置后触发事件的效果

如何用jquery实现页面滚动到指定位置后触发事件的效果?

博客园随笔中点击标签可以跳到当页指定位置的方法

js滚动到指定位置

JQUERY实现点击INPUT使光标移动到最后或指定位置