1

I want to select a text area when I press '/' but when I do that it does it but also puts the slash in the box which I don't want.

   document.addEventListener("keydown", e => {
       if (e.key === '/') document.getElementById("box").select()
   });

I've tried select, focus, and click. It selects the input text area, but it puts the slash as well.

3 Answers 3

2

Just use keyup instead:

document.addEventListener("keyup", e => {
    if (e.key === '/') document.getElementById("box").select()
});

Edit:

Reason: The KeyboardEvent.key event follows a sequence in the execution of the different types of events:

  • keydown
  • beforeinput (only on editable content like <input>, <textarea>, etc.)
  • input (only on editable content like <input>, <textarea>, etc.)
  • keyup

See KeyboardEvent sequence for further details.

So the thing that happens when using keydown in your scenario is:

  • keydown: box gets selected
  • beforeinput: fires because the active element is an editable element, but nothing happens
  • input: fires because the active element is an editable element + inserting the / into box
  • keyup: fires but nothing happens

When using keyup instead:

  • keydown: fires but nothing happens
  • beforeinput: doesn't fire because the active element is NOT an editable element
  • input: doesn't fire because the active element is NOT an editable element
  • keyup: box gets selected

Edit: If you want to be able to use / inside the box, first check that box is not the active element (although it would make it impossible to use / in other input's, but I think this is a completely different topic):

document.addEventListener("keyup", e => {
    const box = document.getElementById("box")
    if (e.key === '/' && box !== document.activeElement) box.select()
});
Sign up to request clarification or add additional context in comments.

Comments

1

You could use an event listener to monitor the textarea for the character, and if it's detected, replace it with an empty string. Of course, this will prevent anyone from actually typing that character in the field as well, but it sounds like that might be what you want.

Example:

let textArea = document.getElementById("textArea");

// listen for keyup, if slash pressed, select text
textArea.addEventListener("keyup", (e) => {
  if (e.key === "/") {
    textArea.select();
  }
});

// listen for input, replace slash with empty string
textArea.addEventListener("input", (e) => {
  textArea.value = textArea.value.replaceAll("/", "");
})
<textarea rows="3" id="textArea">
</textarea>

Comments

-1

Using your listener like this would select the input field every time a user presses the "/"-Key

you should add "e.preventDefault()" to avoid displaying the character in the field.

document.addEventListener("keydown", e => {
       e.preventDefault();
       if (e.key === '/') document.getElementById("box").select()
       [...]/* Logic here if you want the slash as a valid character */

   });

3 Comments

That caused errors, but I messed around and found it I think.
This will prevent entering any key.
@connexo You're right. I am sorry, did not tried it beforehand. Thanks for your comment!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.