In HTML, how to stop propagation of the spacebar activating a container button

Patrick Szalapski 0
Viewed 37

Suppose I have an <input> inside a <button> like the following. Doing stopPropagation inside onclick stops a click on the text input from actuating the containing button. But when I press the spacebar while inside that text input, how do I stop that event from propagating and thus actuating the button?

In other words, I want to type space characters into the text input below freely without getting an alert. Can this be done?

I thought the answer might be to make onkeyup or oninput stop propagation, but doing so doesn't change anything.

<button onclick="alert('button activated');">
   Part of label
   <input type="text" 
          onclick="(arguments[0] || window.event).stopPropagation();">
   End of label
</button>

dom-events javascript html
1 Answers

You can add onkeyup with preventDefault to prevent key release of space which triggers that button click.

<button onclick="alert('button activated');">
   Part of label
   <input type="text"
          onkeyup="(arguments[0] || window.event).preventDefault();" 
          onclick="(arguments[0] || window.event).stopPropagation();">
   End of label
</button>

Nick Vu0
Related