CODEWITHSUNDEEP
javascripthtmldom
burner8268
burner8268

Reputation: 27

Select text input without input

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.

Upvotes: 1

Views: 548

Answers (3)

Bqardi
Bqardi

Reputation: 691

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()
});

Upvotes: 2

JoshG
JoshG

Reputation: 6735

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>

Upvotes: 1

exa.byte
exa.byte

Reputation: 187

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 */

   });

Upvotes: -1

Related Questions