CODEWITHSUNDEEP
javascriptfocus
user2085143
user2085143

Reputation: 4232

Javascript Focus Button

Is it possible to have a button on a page, for example named "next", which when clicked will put focus on the next input field in a form. So, for example I have;

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

Which puts focus on the first td element in a table when the next button is clicked.

How would I go about changing this so that when clicked again, it will change focus to the next td element? As opposed to refocusing on the same one.

Using vanilla js and no Jquery!

Upvotes: 0

Views: 13222

Answers (2)

LTJD
LTJD

Reputation: 61

I dont think Document.activeElement whill work in this case when focus should be moved with a click of a button. Each time the button is clicked it will get focus and the button is all that Document.ActiveElement will return.

http://jsfiddle.net/uyd9ejam/

I would work with tabindex but if you really want a button to move the focus you can do like this with the help of class attribute. 

var tabindex = 0;

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

Upvotes: 2

ummahusla
ummahusla

Reputation: 2063

Document.activeElement

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

Often this will return an or object, if it has the text selection at the time. If so, you can get more detail by using the element's selectionStart and selectionEnd properties. Other times the focused element might be a element (menu) or an element, of type button, checkbox or radio.

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

Typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate it (press a button, choose a radio).

Do not confuse focus with a selection over the document, consisting mostly of static text nodes. See window.getSelection() for that.

When there is no selection, the active element is the page's or null. 

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

Syntax

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>

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

Upvotes: 0

Related Questions