how to restrict javascript events

Question

i want the event to happen only on to the username input type but it is occurring on each and every input type on the page. I need spaces to be restricted only in the username and not in other fields. Please provide with the appropriate event or event restriction technique.

Javascript:

<head><script>
$("myst()").on("onmouseover", function (e) {
return e.which !== 32;
});</script></head>

Html:

 <input type="text" name="fname" placeholder="First Name">
  <input type="text" name="lname" placeholder="Last Name"><br>        
  <input type="text" name="username" onmouseover="myst()" size="56" placeholder="User Name"><br>
  <input type="text" name="email" placeholder="Email Address">
  <input type="text" name="email2" placeholder="re-enter your Email Address"><br>
  <input type="password" name="password" placeholder="Password"><br>

Possible duplicate of [How prevent whitespace in input field with plain javascript](http://stackoverflow.com/questions/32366300/how-prevent-whitespace-in-input-field-with-plain-javascript) — thekodester, Jan 11 '17 at 13:49
To start `onmouseover="myst()"` is incorrect with `$("myst()")` — thekodester, Jan 11 '17 at 13:54
`onmouseover="myst()"` takes a JavaScript function. `$("myst()")` takes a unique identifer like `$("input[name=username]")` also it not `"onmouseover"` it would be `"mouseover"` in jQuery also e.which well always be 0 since it a mouse event. — thekodester, Jan 11 '17 at 13:55
`on("on<---` there should not be on there.... that event would be ononmouse... — epascarello, Jan 11 '17 at 14:43

thekodester · Answer 1 · 2017-01-11T18:15:26.573

Not sure what your trying to do. Seems like trying to prevent white-space.

jQuery (with jQuery we assign the event keypress to input[name=username]):

$("input[name=username]").on("keypress", function(e) {
  var keyCode = (window.Event) ? e.which : e.keyCode;
  return keyCode !== 32;
});

.form-group {
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <input type="text" name="fname" placeholder="First Name">
  <input type="text" name="lname" placeholder="Last Name">
</div>
<div class="form-group">
  <input type="text" name="username" size="56" placeholder="User Name">
</div>
<div class="form-group">
  <input type="text" name="email" placeholder="Email Address">
  <input type="text" name="email2" placeholder="Confirm Email Address">
</div>
<div class="form-group">
  <input type="password" name="password" placeholder="Password">
</div>

Pure JavaScript (with JS we assign the input (using name again since no Ids) a function to call your code):

document.getElementsByName("username")[0].onkeypress = function(e) {
  return (e.keyCode !== 32);
};

.form-group {
  margin-top: 15px;
}

<div class="form-group">
  <input type="text" name="fname" placeholder="First Name">
  <input type="text" name="lname" placeholder="Last Name">
</div>
<div class="form-group">
  <input type="text" name="username" size="56" placeholder="User Name">
</div>
<div class="form-group">
  <input type="text" name="email" placeholder="Email Address">
  <input type="text" name="email2" placeholder="Confirm Email Address">
</div>
<div class="form-group">
  <input type="password" name="password" placeholder="Password">
</div>

Should read about Attribute Equals Selector or Element.getElementsByTagName() and keypress

Also with jQuery their is many type of Selectors must common is $("#unique-id") which would look for element with an id="unique-id" or with JavaScript document.getElementById() which also takes a id value and looks for it on a element.

how to restrict javascript events

1 Answers1