How to de-select a button using JavaScript

Question

I have a button that a user is supposed to click to upload files:

window.URL = window.URL || window.webkitURL;

var button = document.getElementById("button"),
    fileElem = document.getElementById("fileElem"),
    fileList = document.getElementById("fileList");

button.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault();
}, false);

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    fileList.innerHTML = "";
    for (var i = 0; i < files.length; i++) {
      var videoFile = document.createElement("video");
      videoFile.setAttribute("id", "recording");
      videoFile.src = window.URL.createObjectURL(files[i]);
      videoFile.height = 240;
      videoFile.width = 320;
      videoFile.setAttribute("controls", true);
      videoFile.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      fileList.appendChild(videoFile);
    }
  }
}

Then the user is supposed to use the space bar to pause/play a video. My problem is after the user clicks the button, the button stays clicked so when he or she pushes the space bar, the button is liked again. To solve this problem, the user would have to click somewhere else on the screen (except for the button) and then the space bar will work to pause/play the video. But I do not want the user to click somewhere else. So I tried to click a span element using JS but it did not work:

document.getElementById("spanElement").click();

This click is supposed to simulate the click the user would on the screen, but it doesn't work because when the spacebar is pressed, the button is clicked.

Any suggestions to solve this? Thank you

stackoverflow.com/questions/8294728/… .... Looks like something that might help — SagaciousLearner
– SagaciousLearner, Commented Mar 2, 2016 at 15:35

Philippe Schwyter · Accepted Answer · 2016-03-02 15:40:58Z

1

Using HTMLElement.blur() should have the desired effect.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur

button.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault();
  e.target.blur();
}, false);

This will remove focus from the element once clicked.

answered Mar 2, 2016 at 15:40

Philippe Schwyter

3033 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zakaria Acharki · Accepted Answer · 2016-03-02 15:51:08Z

0

That happen because after the click on the button it still focused, so to solve that behavior you could use .blur() in the end of click event.

The blur() method is used to removes keyboard focus from the current element.

button.addEventListener("click", function (e) {
    if (fileElem) {
      fileElem.click();
    }

    e.target.blur(); //Remove focus after click
    e.preventDefault();
}, false);

Hope this helps.

edited Mar 2, 2016 at 15:51

answered Mar 2, 2016 at 15:44

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Comments

Yudishtira · Accepted Answer · 2016-03-02 17:58:52Z

0

You could also add css to the button - pointer events

to disable button: $("#buttonId").css("pointer-events", "none");

to reactivate button: $("#buttonId").css("pointer-events", "auto");

answered Mar 2, 2016 at 17:58

Yudishtira

768 bronze badges

Collectives™ on Stack Overflow

How to de-select a button using JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related