Javascript焦点按钮

是否有可能在页面上有一个按钮，例如名为“next”，点击时会将焦点放在表单中的下一个输入字段上。所以，例如，我有;Javascript焦点按钮

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

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

我将如何去改变这个，所以当再次点击时，它会改变焦点到下一个TD元素？而不是重新集中在同一个。

使用香草js和没有jquery！

来源

2014-10-08 user2085143

你可以用'document.activeElement'当前焦点元素：https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement – 2014-10-08 19:58:00

如何做一个TD获得焦点？ – epascarello 2014-10-08 20:09:16

请原谅我。 td内的输入字段。 – user2085143 2014-10-08 20:17:16

我不认为Document.activeElement whill在这种情况下工作，当f只需点击一下按钮即可移动ocus。每次单击该按钮时，它将获得焦点，并且该按钮就是Document.ActiveElement将返回的所有内容。

http://jsfiddle.net/uyd9ejam/

我会的tabindex工作，但如果你真的想要一个按钮来移动你可以像这样以类属性的帮助焦点。

var tabindex = 0; 

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

来源

2014-10-08 21:51:30 LTJD

正是我想要的。非常感谢！ – user2085143 2014-10-09 16:00:51

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

来源

2014-10-08 20:42:29 ummahusla

Javascript焦点按钮

回答

相关问题