0

first of all sorry for my low english..

i have this code:

<input id="id1" type="text"/>

<input id="id2" type="text"/>

 document.getElementById("id1").onkeypress = function(e) {
  var chr = String.fromCharCode(e.which);
  if ("><abc/\"".indexOf(chr) >= 0)
      return false;
};

How can I choose the second id? Example : id1, id2 i want use this code

Thanks!

ertugrulov
  • 1
  • 4

2 Answers2

0

Using jQuery:

$('#id1, #id2').on('keypress', function(e) {
  var chr = String.fromCharCode(e.which);
  if ("><abc/\"".indexOf(chr) >= 0)
      return false;
});

You can expand the list of id selectors: "#id1, #id2, #id3, ...".
But if there are too many elements, it's better to assign them a class and target them like this:

$('.className').on('keypress', function(e) {
  var chr = String.fromCharCode(e.which);
  if ("><abc/\"".indexOf(chr) >= 0)
      return false;
});
domenikk
  • 1,723
  • 1
  • 10
  • 12
  • Yet another use of JQuery for something so simple with the native DOM. – Scott Marcus Oct 11 '20 at 20:34
  • Hello domenikk $('#id1, #id2').on('keypress', function(e) { << this code not working. I'm waiting for your help. I'm still trying – ertugrulov Oct 11 '20 at 20:35
  • @ertugrulov See my answer below. It's the simplest and most direct solution. – Scott Marcus Oct 11 '20 at 20:35
  • If he's already using it or plans to, this would be the best option. You are free to post your vanilla js answer – domenikk Oct 11 '20 at 20:37
  • I already have done just that. It doesn't mean that pointing out an answer as not optimal isn't warranted. When JQuery was introduced the native DOM wasn't as evolved as it is now. Today, doing something as trivial as selecting an element hardly calls for the use of a library. If we don't point this out, a whole generation of new coders won't know the difference. – Scott Marcus Oct 11 '20 at 20:39
  • @ertugrulov did you include jquery in your code? You could import it adding this: – domenikk Oct 11 '20 at 20:39
  • The optimal answer depends on the use case, you can't decide it with this amount of information. There might be many who see this question and are already using jquery; for them this would be the optimal answer. – domenikk Oct 11 '20 at 20:42
  • Sorry, but that's not true. Clearly this is a new coder and clearly JQuery is overkill for this solution. If you want to show that solution, fine, but you should point out that fact. – Scott Marcus Oct 11 '20 at 20:44
0

Instead of using id's in the first place, which leads to brittle code (like you are seeing with your problem) and doesn't scale well, set up the event on an ancestor element and handle the event when it bubbles up to that ancestor element. This is called event delegation and simplifies your code. When handling the event, the event.target element will hold a reference to the actual element that triggered the event in the first place, so you don't need to know its id.

// Use modern standards to event handling with .addEventListener(), rather than
// setting up event properties. Here, we're handling the event at the wrapper
// element, so when an event originates from a descendant, it will bubble up
// and be handled here.
document.getElementById("wrapper").addEventListener("keydown", function(e) {
  // The event.target references the element where the event was triggered
  // To get the character that was presssed, use event.key

  // indexOf returns -1 when no match is found.
  // Instead of checking for the condition where you should do 
  // nothing, check for the condition where you should do something
  if ("><abc/\"".indexOf(e.key) > -1){
     console.log("Match found");
  }
});
<div id="wrapper">
  <input type="text">
  <input type="text">
</div>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71