如何在JavaScript中取消按键事件？字符超160时禁止输入怎么实现？

Hey there! Let's tackle your two JavaScript questions one by one—these are super common scenarios, so great you're getting clear on them early.

To cancel a key event's default behavior, you'll mostly use the event.preventDefault() method. This stops the browser from doing its usual action for that key (like inserting a character, submitting a form when you press Enter, etc.).

For example, if you want to block the Enter key from submitting a form or inserting a newline in an input:

// Grab your input element
const myInput = document.getElementById('userInput');

myInput.addEventListener('keydown', function(event) {
  // Check if the pressed key is Enter
  if (event.key === 'Enter') {
    event.preventDefault(); // Cancel the default action
    alert("Enter key is disabled here!");
  }
});

A quick note: If you also want to stop the event from bubbling up to parent elements (like a parent div listening for key events), you can add event.stopPropagation() too—but preventDefault() is usually all you need to cancel the key's default behavior.

There are two solid ways to handle this: one uses plain HTML (super simple), and the other uses JavaScript if you need more control or custom feedback.

Option 1: HTML's maxlength attribute (quickest) #

Just add maxlength="160" to your input or textarea element. The browser will automatically block any extra characters:

<input type="text" id="messageInput" maxlength="160">

Option 2: JavaScript for custom logic #

If you want to show a custom message, or handle truncation more intentionally, use an input event listener:

const messageInput = document.getElementById('messageInput');
const maxChars = 160;

messageInput.addEventListener('input', function() {
  if (this.value.length > maxChars) {
    // Truncate the text to 160 characters
    this.value = this.value.slice(0, maxChars);
    // Show a custom alert or update a character counter
    console.log(`Whoa, max ${maxChars} characters allowed!`);
  }
});

You can also use a keydown listener to block input before it happens (this stops extra characters from even appearing briefly):

messageInput.addEventListener('keydown', function(event) {
  // Let functional keys (backspace, delete, arrows) work normally
  const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
  
  if (!allowedKeys.includes(event.key) && this.value.length >= maxChars) {
    event.preventDefault();
    alert(`You've hit the ${maxChars} character limit!`);
  }
});

内容的提问来源于stack exchange，提问作者Kasim ŞEN