0

我是一名业余编码员和 javaScript 新手（或更少），我正在尝试构建一个具有多个（许多）<textarea>输入的在线表单。

为了论证，我们假设它是 3 x 3 类型方向：

由于其他功能和性能的原因，我必须使用<textarea>而不是<inputs>.

带有文本区域输入的简单示例 html 表单

如果有人按下 [TAB]，那么正如预期的那样，标签索引会毫无顾虑地遵守 ( A1 --> B1 )。

如果有人按下 [RETURN]，因为它是 a <textarea>，它会添加 \n 分隔符，换行并保持在仍然聚焦的<textarea>.

我想要发生的是，当一个人按下 [RETURN] 时，三个选项卡索引被“跳过”（如果这是正确的词），焦点转到<textarea>前一个焦点的正下方<textarea>。

例子：我在A1；我写/输入一些东西；我按[返回]；我被直接带到A2。

[[更新]]

HTML 文本区域代码示例：

<textarea data-id="0" class="inputArea colorInput" id="dataInput_0" name="colorInput_row_1" onFocus="classFocused();" onBlur="classBlured();" onKeyUp="splitInput();"></textarea>
4

1 回答 1

0

使用 jQuery javascript 框架，将按键事件侦听器附加到您的文本区域，如果按下的键是 [ENTER]（键代码 13），那么您将焦点转移到您想要的字段（最好为文本区域设置 ID 以轻松识别它们）。

HTML

<textarea class="ta" data-id="1"></textarea>
<textarea class="ta" data-id="2"></textarea>
<textarea class="ta" data-id="3"></textarea>

<textarea class="ta" data-id="4"></textarea>
<textarea class="ta" data-id="5"></textarea>
<textarea class="ta" data-id="6"></textarea>

<textarea class="ta" data-id="7"></textarea>
<textarea class="ta" data-id="8"></textarea>
<textarea class="ta" data-id="9"></textarea>

Javascript

$(document).ready(function(){

    //attach the event listener on your text areas
    $('.ta').keypress(function(e){
        if (e.keyCode == 13) //check if [enter] was pressed
        {
            var currentID = $(this).attr('data-id'); //get the ID of the text area where this happened
            if (currentID < 7) $('.ta[data-id="' + (currentID + 3) + '"]').focus(); //if there are other text areas down the line, shift the focus
        }
    });

})
于 2013-04-20T06:27:28.173 回答