在html表单中,我们需要使用箭头键向上或向下移动字段中的焦点。以下代码适用于所有输入元素。但在文本区域的情况下,可能有多行,所以,如果我们向上或向下移动,光标就会在文本区域中向上或下移。
现在,我不知道如何向上移动焦点,如果在按下向上箭头的同时光标到达文本区域的第一行,或者如果在按下向下箭头键的同时光标达到文本区域的末尾或最后一行,则向下移动焦点
这是我的部分代码:
var INPUT_SELECTOR = ':input:enabled:visible';
var inputs = $(INPUT_SELECTOR)
$("form").on("keypress", "input", function(event){
// i is current input
if(event.keyCode === 38){ //action == 'up'
inp = inputs[i > 0 ? parseInt(i) - 1 : inputs.length - 1];
}
if(event.keyCode === 40){ //action == 'down'
inp = inputs[i < inputs.length - 1 ? parseInt(i) + 1 : 0];
}
// focus on the input
moveFocusTo(inp);
});
我们对上下箭头键的要求与tab
和shift+tab
的行为相同。一切都完成了,我们只是停留在文本区。
听起来你需要使用https://developer.mozilla.org/en-US/docs/Web/API/event.relatedTarget#1003983
event.relatedTarget
然后,您可以在事件期间查看用户关注的元素,并采取相应的行动。