使用箭头键在输入框中导航和选择文本 [英] Using arrows-keys to navigate and select text in input box

问题描述

解释问题的解决方案：
使用箭头键导航

http://jsfiddle.net/BdVB9 /

我有一些带有文本输入的表格，在单元格之间导航期间，我在表格单元格的输入框中选择文本时遇到了一些问题。

任何人都可以帮我解决吗？导航工作正常，但没有在输入框中选择文本！而且我也只想在具有输入框的单元格之间导航，而不是全部导航

注意：我只想在具有文本输入框的单元格之间导航。 / p>

表格代码：

 < table border =1id = 导航 > 
< tbody> 
< tr> 
< td>< input type =textid =1class =input>< / td> 
< td>< / td> 
< td>< input type =textid =3class =input>< / td> 
< td>< / td> 
< td>< input type =textid =5class =input>< / td> 
< / tr> 
< tr> 
< td>< input type =textid =6class =input>< / td> 
< td>< input type =textid =7class =input>< / td> 
< td>< / td> 
< td>< input type =textid =9class =input>< / td> 
< td>< input type =textid =10class =input>< / td> 
< / tr> 
< tr> 
< td>< input type =textid =11class =input>< / td> 
< td>< input type =textid =12class =input>< / td> 
< td>< / td> 
< td>< input type =textid =14class =input>< / td> 
< td>< input type =textid =15class =input>< / td> 
< / tr> 
< / tbody> 
< / table> 
  

这是我自己的恶魔

解决方案

我把你指定的功能放在一个小提琴上 http://jsfiddle.net/tppiotrowski/L7cm8/10/ 。我希望我能正确理解你的要求。如果您需要任何更改或不理解代码，请告诉我们。祝你好运！

  var active = 0; 
 // $（'＃navigate td'）。each（function（idx）{$（this）.html（idx）;}）; 
 rePosition（）; 
 
 $（document）.keydown（function（e）{
 reCalculate（e）; 
 rePosition（）; 
 //如果key是箭头键，不要输入用户
 //输入。如果是任何其他键（a，b，c等）
 //编辑文本
 if（e.keyCode> 36 && e.keyCode< 41）{
 return false; 
} 
}）; 
 
 $（'td'）。click（function（）{
 active = $（this）.closest（'table'）。find（'td'）。index（this） ; 
 rePosition（）; 
}）; 
 
 
函数reCalculate（e）{
 var rows = $（'＃navigate tr'）。length; 
 var columns = $（'＃navigate tr：eq（0）td'）。length; 
 var temp; 
 
 if（e.keyCode == 37）{//向左移动或包裹
 temp = active; 
 while（temp> 0）{
 temp = temp  -  1; 
 //只有在td 
中有一个输入字段if（$（'#trip tr td'）时才前进.eq（temp）.find（'input'）。length！= 0） {
 active = temp; 
休息; 
} 
} 
} 
 if（e.keyCode == 38）{//向上移动
 temp = active; 
 while（temp  -  columns> = 0）{
 temp = temp  -  columns; 
 //只有在td 
中有一个输入字段if（$（'#trip tr td'）时才前进.eq（temp）.find（'input'）。length！= 0） {
 active = temp; 
休息; 
} 
} 
} 
 if（e.keyCode == 39）{//向右移动或包裹
 temp = active; 
 while（temp<（columns * rows） -  1）{
 temp = temp + 1; 
 //只有在td 
中有一个输入字段if（$（'#trip tr td'）时才前进.eq（temp）.find（'input'）。length！= 0） {
 active = temp; 
休息; 
} 
} 
} 
 if（e.keyCode == 40）{//向下移动
 temp = active; 
 while（temp + columns< =（rows * columns） -  1）{
 temp = temp + columns; 
 //只有在td 
中有一个输入字段if（$（'#trip tr td'）时才前进.eq（temp）.find（'input'）。length！= 0） {
 active = temp; 
休息; 
} 
} 
} 
} 
 
函数rePosition（）{
 console.log（active）; 
 $（'。active'）。removeClass（'active'）; 
 $（'＃navigate tr td'）。eq（active）.addClass（'active'）; 
 
 var input = $（'＃navigate tr td'）。eq（active）.find（'input'）。focus（）; 
 scrollInView（）; 
} 
 
函数scrollInView（）{
 var target = $（'＃navigate tr td：eq（'+ active +'）'）; 
 if（target.length）{
 var top = target.offset（）。top; 
 
 $（'html，body'）。stop（）。animate（{
 scrollTop：top  -  100 
}，400）; 
返回false; 
} 
} 
  

as explain on solution for the issue: Using arrows-keys to navigate

http://jsfiddle.net/BdVB9/

I have same table with some text input, and I got some problem to select text in input box in tables cells during navigating between cells.

can any one help me to solve it? navigation works fine but not select text in input box!!! and also i want to navigate only between cells that have input-box, not all them

Notes: I just want to navigate between cells that have text input-box.

table codes:

    <table border="1" id="navigate">
    <tbody>
        <tr>
            <td><input type="text" id="1" class="input"></td>
            <td></td>
            <td><input type="text" id="3" class="input"></td>
            <td></td>
            <td><input type="text" id="5" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="6" class="input"></td>
            <td><input type="text" id="7" class="input"></td>
            <td></td>
            <td><input type="text" id="9" class="input"></td>
            <td><input type="text" id="10" class="input"></td>
        </tr>
        <tr>
            <td><input type="text" id="11" class="input"></td>
            <td><input type="text" id="12" class="input"></td>
            <td></td>
            <td><input type="text" id="14" class="input"></td>
            <td><input type="text" id="15" class="input"></td>
        </tr>
    </tbody>
</table>

and this is my own demon

解决方案

I put together a fiddle with the functionality you specified http://jsfiddle.net/tppiotrowski/L7cm8/10/. I hope I understood your requirements correctly. Let me know if you need any alterations or do not understand the code. Good luck!

var active = 0;
//$('#navigate td').each(function(idx){$(this).html(idx);});
rePosition();

$(document).keydown(function(e) {
    reCalculate(e);
    rePosition();
    // if key is an arrow key, don't type the user
    // input. if it is any other key (a, b, c, etc)
    // edit the text
    if (e.keyCode > 36 && e.keyCode < 41) {
        return false;
    }
});

$('td').click(function() {
    active = $(this).closest('table').find('td').index(this);
    rePosition();
});


function reCalculate(e) {
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    var temp;

    if (e.keyCode == 37) { //move left or wrap
        temp = active;
        while (temp > 0) {
            temp = temp - 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 38) { // move up
        temp = active;
        while (temp - columns >= 0) {
            temp = temp - columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 39) { // move right or wrap
        temp = active;
        while (temp < (columns * rows) - 1) {
            temp = temp + 1;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 40) { // move down
        temp = active;
        while (temp + columns <= (rows * columns) - 1) {
            temp = temp + columns;
            // only advance if there is an input field in the td
            if ($('#navigate tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
}

function rePosition() {
    console.log(active);
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');

    var input = $('#navigate tr td').eq(active).find('input').focus();
    scrollInView();
}

function scrollInView() {
    var target = $('#navigate tr td:eq(' + active + ')');
    if (target.length) {
        var top = target.offset().top;

        $('html,body').stop().animate({
            scrollTop: top - 100
        }, 400);
        return false;
    }
}​

这篇关于使用箭头键在输入框中导航和选择文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！