在输入键上按更改光标位置javascript？答案

【问题标题】：On enter key press change cursor position javaScript?在输入键上按更改光标位置javascript？
【发布时间】：2012-05-22 23:09:11
【问题描述】：

我有两个文本字段的表单，onLoad="document.forms.obrazac.sifra.focus()" 我将光标放在第一个字段上。现在我想当用户按下回车键将光标聚焦在第二个字段上，然后当再次按下回车时我想提交我的表单。我该怎么做呢，谢谢。

【问题讨论】：

只是我的 2 美分，但打破浏览器默认行为是不好的做法。
tab键默认会遍历表单输入元素，enter键默认会提交表单。如果它不是项目的特定约束，最好保持这种状态。
如果 Wolf87 有这样做的请求，最好打破默认行为。这取决于我们在谈论什么：网页或网络应用程序。
这也取决于观众。如果客户因为 x 或 y 原因明确要求它，那就去吧。

标签： javascript html

【解决方案1】：

打破默认行为肯定不好。顺便说一句，你知道 HTML 中的 autofocus 属性吗？

如果你绝对需要这个，给你：

document.forms.obrazac.onkeypress = function( e ) {
    // If the hit key is "Enter"
    if ( e.keyCode === 13 ) {

        // Cross-browser handling for our dear friend @MaxArt :p
        var evt = e || window.event,
            target = evt.target || evt.srcElement,

        // Find the next input
            nextInput = target.nextSibling;
        while ( nextInput.tagName !== 'INPUT' && nextInput.nextSibling ) {
            nextInput = nextInput.nextSibling;
        }

        // And focus it
        nextInput.focus();

        // Finally, disable submitting IF there is no input after
        if ( nextInput !== this.elements[ this.elements.length - 1 ] ) {
            return false;
        }
    }
};

【讨论】：

1.传统的事件监听在所有地方都被弃用了。 2. IE8-不支持nextElementSibling。 3. 所以e.target 不是。
1.呜？你在哪里见过这个？ 2/3：当然。
1.到处都是。始终建议将 HTML 和 Javascript 分开，并使用比传统注册模型更现代的方法，因为您可以为同一种事件附加多个侦听器。
你在那里看到任何 HTML 吗？当然，addEventListener 更现代。然而，它不是跨浏览器。此答案中的代码是。
如果 Wolf87 已经在该元素上进行了传统注册事件怎么办？如果你要污染他的 DOM，至少要警告他。也许他正在使用 jQuery 或其他帮助他注册事件侦听器的框架。

【解决方案2】：

只是一个简短的不是真正的测试样本......只是给你一个想法：

<head>
    <script type="text/javascript">
    function onKeyPress(args)
    {
        if(args.keyCode === 13)
            document.getElementById("tb2").focus();
    }       
    </script>
</head>
<body>
    <input type="text" onkeypress="onKeyPress(event);" id="tb1" />
    <input type="text" id="tb2" />
</body>

您可以在 tb2 上执行相同操作，以在“ENTER”上提交表单我还会使用 jQuery 之类的东西在 javascript 中绑定事件，而不是直接在标记中。

希望对你有帮助。

@因为我已经开始在没有答案的地方创建我的示例 =)

【讨论】：

【解决方案3】：

我不会破坏默认行为，这对用户来说非常烦人和违反直觉，但如果你真的想这样做，你可以用 jquery 做这样的事情：

$('#form').keydown(function(e) {
    if( e.keyCode === 13) {  // When "Shift + Enter"
        e.preventDefault();
        // focus on next field here.
    }
});

与其这样做，不如像这样（使用 tabindex）进行正确的 Tab 键顺序：

<input type="text" name="field1" tabindex=1 /><br />

【讨论】：

【解决方案4】：

试试这个：

document.forms.obrazac.sifra.addEventListener("keyup", function(e) {
    if (e.keyCode === 13) { // 13 === enter key
        e.preventDefault();
        this.nextSibling.focus();
    }
});

注意这些事情：

我使用了addEventListener，但在 IE8 和更早版本中，您必须使用attachEvent("onkeyup"... 并检查全局event 对象。此外，e.preventDefault(); 变为 e.returnValue = false;
我认为this.nextSibling 是下一个字段。更正此内容以适合您的 DOM。

【讨论】：

1. keyup 是最糟糕的事件。 2. 即使下一个字段紧随其后，nextSibling 也很可能会得到一个 textNode。 3.this是document.forms.obarazac.sifra，不是触发事件的元素。
1.请解释。 2.“可能”与“肯定”不同。我说我猜的。 3.document.forms.obarazac.sifra，如果它可能是一个输入字段，它正是触发事件的原因。
1. whattheheadsaid.com/2010/09/… 2.“最有可能”是“大部分时间”:)。 3. 第一次，是的。不是第二次。
1.不是重点。我们不想检测输入值，只检测按下的键的值。 keyup 在这里很好。 2. 我已经说过应该纠正它以适应 DOM。 3.第二次让浏览器做就ok了，就像Wolf87说的那样。