2

I'm reading over answers here, and they all seem to follow a similar theme that I can't understand, and I don't know what I'm looking at enough to try and google it.

They all have this pattern of onkeypress return somefunction, and somefunction often returns a boolean.

I don't understand which part of this is doing the actual restriction. The return value? The web browser? The HTML?

And how?

None of this makes any sense. I'm floundering quite a bit here with my understanding of javascript. I can't get a handle on what is doing what. Why does returning false or true do anything at all?

If anyone can point me in the right direction, I'd very much appreciate it. A lot of resources I've found are either what an array is and how to declare variables, or they skip straight to a solution. I'm just trying to figure out what is happening in those solutions.

Here is the pattern:

<input type="text" onkeypress="return somefunction()">

<script>
  function somefunction() 
  {
    return false;
  }
</script>

<input type="text" onkeypress="return somefunction2()">

and the js

function somefunction2()
{
    return false;
}

Secondary, why does this work in jsfiddle when it's in a script tag, but not with an attached jsfile?

Community
  • 1
  • 1
r12
  • 1,712
  • 1
  • 15
  • 25
  • 1
    Returning false from onkeypress essentially blocks input because it cancels the event. This is HTML behavior. Why it works inline but not in a referenced file, I can't say. – TomSlick May 11 '16 at 19:05

1 Answers1

4

JavaScript event handlers fire before the default browser behavior is performed. Returning false inside of an event handler prevents the default behavior from occurring. It also stops the event from bubbling up the event chain to ancestor elements. In your example, pressing a key while the text input has focus will prevent that key's character from appending to the input value.

Here's some further reading: What's the difference between event.stopPropagation and event.preventDefault?

Community
  • 1
  • 1
SimianAngel
  • 631
  • 10
  • 14
  • I'm interpreting from your answer that in a text-thing, the "default browser behavior" is to allow the keyboard input, while focus is on text-thing, to render in the text-thing. Is that far-off? Is that the default behavior being prevented? Also, does default browser behavior work in a functionally similar way to addEventListener()? Thank you. – r12 May 11 '16 at 19:25
  • 1
    Absolutely. If you've clicked or tabbed into a text input and you begin to type, the expected behavior would be for those keystrokes to display inside the field. It's the default browser behavior when you press a key. Pressing a key also fires a JavaScript `keypress` event. In fact a `keydown` event is fired, followed by `keypress` while a key is held down, and finally a `keyup` event when released. If a `keypress` event listener is added to the text input, then a function that you specify will be executed every time that input has focus and a key is pressed. – SimianAngel May 11 '16 at 19:47