javascript - How to determine the current state of a HTML Button - Stack Overflow

admin管理员组

文章数量:1023607

From plain javascript, how can I tell if a <button> is currently pressed or not?

It isn't sufficient to use mouse events, because the button could be pressed due to an alternate input method, such as a key press, or maybe even some other accessibility method that somebody invents in the future (tablets e to mind).

But in searching the properties and attributes of the button element, I don't see anything showing the buttons current state.

From plain javascript, how can I tell if a <button> is currently pressed or not?

It isn't sufficient to use mouse events, because the button could be pressed due to an alternate input method, such as a key press, or maybe even some other accessibility method that somebody invents in the future (tablets e to mind).

But in searching the properties and attributes of the button element, I don't see anything showing the buttons current state.

• javascript
• button

Share Improve this question Follow asked Aug 8, 2014 at 22:53 MichaelMichael 9,4011515 gold badges7474 silver badges138138 bronze badges 6

• What do you want to do with this information? – Felix Kling Commented Aug 8, 2014 at 22:54
• One day we'll all have I Dream of Jeannie blink-control. Buttons will be obsolete. – Jared Farrish Commented Aug 8, 2014 at 22:55
• @FelixKling Feed it to my cat! Just kidding, I'm actually trying to find a reliable way of catching state changes; since mouse events aren't sufficient I figure if I can get the button's actual state at various intervals if will be better than nothing. – Michael Commented Aug 8, 2014 at 22:57
• @JaredFarrish We will still have the same problem if I don't have a reliable way to tell if the eyes are open or closed... ;-) – Michael Commented Aug 8, 2014 at 22:58
• The onclick event won't work for you? – Cheruvian Commented Aug 8, 2014 at 22:58

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

I'm a bit late, but I stumbled over the same question so here I am. Maybe this still can be helpful to others. According to the HTML specification the button element doesn't have a state. If a button is currently pressed or not is a matter of CSS. The CSS specification defines that the :active pseudo-class applies while an element is being activated by the user. So the questions boils down to how to get that class with javascript. This can be done with

this == document.activeElement

where this is the button. The statement is true if the button is active.

It actually makes sense that a button, other than a checkbox, doesn't keep a state.

Combine event handlers. Demo here: http://jsbin./horeq/2/edit

HTML

<button id="a">Button</button>


<pre id="output"></pre>

jQuery

var output = $('#output'),
    btn    = $('button#a');

var active;

btn.on('mousedown keydown', function(data) {
  active = 'on';
  output.html(active);
})
btn.on('mouseup keyup', function(data) {
  active = 'off';
  output.html(active);
})

JS (Could be more efficient)

var output = document.getElementById('output'),
    btn    = document.getElementById('a');


var active;

btn.addEventListener('keydown', function(data) {
  active = 'on';
  output.innerHTML = active;
});

btn.addEventListener('keyup', function(data) {
  active = 'off';
  output.innerHTML = active;
});

btn.addEventListener('mousedown', function(data) {
  active = 'on';
  output.innerHTML = active;
});

btn.addEventListener('mouseup', function(data) {
  active = 'off';
  output.innerHTML = active;
});

Add "onclick"-tag to your code.

<input type="button" name="button" value="button" onclick="myfunction()">

Now device run javascript-function, if button are clicked!

From plain javascript, how can I tell if a <button> is currently pressed or not?

It isn't sufficient to use mouse events, because the button could be pressed due to an alternate input method, such as a key press, or maybe even some other accessibility method that somebody invents in the future (tablets e to mind).

But in searching the properties and attributes of the button element, I don't see anything showing the buttons current state.

From plain javascript, how can I tell if a <button> is currently pressed or not?

It isn't sufficient to use mouse events, because the button could be pressed due to an alternate input method, such as a key press, or maybe even some other accessibility method that somebody invents in the future (tablets e to mind).

But in searching the properties and attributes of the button element, I don't see anything showing the buttons current state.

• javascript
• button

Share Improve this question Follow asked Aug 8, 2014 at 22:53 MichaelMichael 9,4011515 gold badges7474 silver badges138138 bronze badges 6

• What do you want to do with this information? – Felix Kling Commented Aug 8, 2014 at 22:54
• One day we'll all have I Dream of Jeannie blink-control. Buttons will be obsolete. – Jared Farrish Commented Aug 8, 2014 at 22:55
• @FelixKling Feed it to my cat! Just kidding, I'm actually trying to find a reliable way of catching state changes; since mouse events aren't sufficient I figure if I can get the button's actual state at various intervals if will be better than nothing. – Michael Commented Aug 8, 2014 at 22:57
• @JaredFarrish We will still have the same problem if I don't have a reliable way to tell if the eyes are open or closed... ;-) – Michael Commented Aug 8, 2014 at 22:58
• The onclick event won't work for you? – Cheruvian Commented Aug 8, 2014 at 22:58

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

I'm a bit late, but I stumbled over the same question so here I am. Maybe this still can be helpful to others. According to the HTML specification the button element doesn't have a state. If a button is currently pressed or not is a matter of CSS. The CSS specification defines that the :active pseudo-class applies while an element is being activated by the user. So the questions boils down to how to get that class with javascript. This can be done with

this == document.activeElement

where this is the button. The statement is true if the button is active.

It actually makes sense that a button, other than a checkbox, doesn't keep a state.

Combine event handlers. Demo here: http://jsbin./horeq/2/edit

HTML

<button id="a">Button</button>


<pre id="output"></pre>

jQuery

var output = $('#output'),
    btn    = $('button#a');

var active;

btn.on('mousedown keydown', function(data) {
  active = 'on';
  output.html(active);
})
btn.on('mouseup keyup', function(data) {
  active = 'off';
  output.html(active);
})

JS (Could be more efficient)

var output = document.getElementById('output'),
    btn    = document.getElementById('a');


var active;

btn.addEventListener('keydown', function(data) {
  active = 'on';
  output.innerHTML = active;
});

btn.addEventListener('keyup', function(data) {
  active = 'off';
  output.innerHTML = active;
});

btn.addEventListener('mousedown', function(data) {
  active = 'on';
  output.innerHTML = active;
});

btn.addEventListener('mouseup', function(data) {
  active = 'off';
  output.innerHTML = active;
});

Add "onclick"-tag to your code.

<input type="button" name="button" value="button" onclick="myfunction()">

Now device run javascript-function, if button are clicked!

本文标签： javascriptHow to determine the current state of a HTML ButtonStack Overflow