Javascript焦点按钮

Javascript Focus Button

本文关键字：按钮 焦点 Javascript      更新时间：2023-09-26

是否可以在页面上有一个按钮，例如名为"下一个"的按钮，单击后会将焦点放在表单中的下一个输入字段上；

function runNext() {
document.getElementById("td").focus();
}

当单击下一个按钮时，它将焦点放在表中的第一个td元素上。

我该如何更改它，以便再次单击时将焦点更改为下一个td元素？与重新关注同一个相反。

使用vanilla js而不使用Jquery！

我认为Document.activeElement在这种情况下不起作用，只需点击按钮即可移动焦点。每次单击该按钮都会获得焦点，Document.ActiveElement将返回该按钮。

http://jsfiddle.net/uyd9ejam/

我会使用tabindex，但如果你真的想要一个按钮来移动焦点，你可以在class属性的帮助下这样做。

var tabindex = 0;
function next(){
   var tab = document.getElementsByClassName("td");
    tab[tabindex].focus();
    if(tabindex == tab.length -1){
                tabindex = 0;
    }
    else{
        tabindex ++;
    }
}

Document.activeElement

返回当前关注的元素，也就是说，如果用户键入任意键，将获得击键事件的元素。此属性是只读的。

如果当时有文本选择，这通常会返回一个或对象。如果是，则可以使用元素的selectionStart和selectionEnd属性来获取更多详细信息。其他时候，焦点元素可能是按钮、复选框或单选类型的元素（菜单）或元素。

Note: On Mac, elements that aren't text input elements tend not to get focus assigned to them.

通常，用户可以按下tab键在页面上的可聚焦元素之间移动焦点，并使用空格键激活它（按下按钮，选择收音机）。

不要将焦点与对文档的选择混淆，文档主要由静态文本节点组成。请参见window.getSelection（）。

如果没有选择，则活动元素为页面的或null。

Note: This attribute is part of the in-development HTML 5 specification.

语法

var curElement = document.activeElement;


$(document).ready(function () {
    function onMouseUp(e) {
        var outputElement = document.getElementById('output-element');
        var outputText = document.getElementById('output-text');
        var selectedTextArea = document.activeElement;
        var selection = selectedTextArea.value.substring(
        selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
        outputElement.innerHTML = selectedTextArea.id;
        outputText.innerHTML = selection;
    }
    document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
    document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
});
* {font-family: "monospace"; font-size:10pt;}
.output {color: #c00;}
<div>
    Select some text from one of the Textareas below:
</div>
<form id="frm-example" action="#" accept-charset="utf-8">
<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
This is Textarea Example One: 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
</textarea>
<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
This is Textarea Example Two:
Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea>
</form>
Active Element Id: <span class="output" id="output-element"></span><br/>
Selected Text: <span class="output" id="output-text"></span>

参考-https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement

相关文章：