I could use help with my virtual keyboard

JavaScript
1

Here is a link to the CodePen version of what I am working on.

I originally had my textBox area set as a div with contenteditable=“true” and I got a lot of the functionality working but not the ENTER key. I also tried a textarea tag but every time I manually put the cursor in that area and use the keyboard the functionality for entering virtual keyboard characters or words stops working. However, I got the Enter key to work with the textarea -ahhhh!

Would someone take a look at the code and see if you know why manually editing the textarea stops the functionality? That is the main thing I need. I also have a few other features I would like to figure out:

  1. Showing the cursor so the user can see it
  2. Being able to enter letters or words at any point where the cursor is manually placed.
  3. If the above can be done, then I’d like to also have the backspace and delete buttons work at the insertion point.

I am using the following code to remove the last character in the textarea with the backspace button:

document
  .getElementById("backspace")
  .addEventListener("click", function () {
    textBox.textContent = textBox.textContent.slice(0, -1);
  });

I know that the code will ONLY remove the last character. How else could I get that button to backspace anywhere?

2

Try using value instead of textContent.

You can check out the DOM interface and all the props and methods, there is some stuff there that might be helpful as well (like range and selection).

3

Will check that out. I just switched from my div to the textarea tag so hopefully, that has the solutions I need.

4

Well, the value method (is that what it is?) solved the editing issue but my js generated li > a words are not being added to the textarea. Instead I get “undefined”. Also, my copy button is not working now for some reason. The only part of the code that references my code if for the id of the text area (I found that code on a website).

5

Thanks! I had one issue but now I have all the functionality I wanted and more. Looks like I should have used teaxtarea from the start. Now I want to have the shift button display the characters on top of other characters, like @ above 2. Then to get delete, backspace, enter, tab and spacebar to work wherever the cursor is. I guess range for the latter.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.