Writing a custom text box for web pages

Question

I want to capture user's activities on my textbox. Since a normal textbox won't give me enough information on what my user is doing currently with it, I want to start on a custom HTML text box. For e.g. If my user is typing Hello world! (Say he made a typo...) I should be able to tell him that,

H e l l o w o r l e [bksp] d !

also if a user selects a text, I should be notified about it.

P.S. I've mentioned a custom text box inorder to be generic. If I can make use of / create something like a plugin on the already available text box or say even a javascript, it's fine.

score 2 · Accepted Answer · edited May 23 '17 at 11:45

Your best bet would be to add functionality to the existing <input type="text"> using javascript.

I don't know how you would create your own textbox as browsers just interpret html which only contain the predefined elements in the HTML specification (apart from certain exceptions such as ActiveX).

As a solution regarding to what you want you can capture every keypress using the onKeyUp event of your document. You can catch every keypress and display them to your liking.

small example:

<script type="text/javascript">

document.onkeyup = KeyCheck;    

function KeyCheck()
{
   var keyID = event.keyCode;
   var keypressed;
   switch(keyID)
   {
      case 16:
      keypressed = "Shift";
      break; 
      case 17:
      keypressed  = "Ctrl";
      break;
      case 18:
      keypressed  = "Alt";
      break;
      case 19:
      keypressed = "Pause";
      break;
      case 37:
      keypressed  = "Arrow Left";
      break;
      case 38:
      keypressed  = "Arrow Up";
      break;
      case 39:
      keypressed  = "Arrow Right";
      break;
      case 40:
      keypressed  = "Arrow Down";
      break;
   }
   document.write(keypressed);
}
</script>

for a list of all the keycodes see here.

[Update]
I just saw that you are also want to know when someone selects text and luckily for you there are also events that handle this:

An <INPUT TYPE = "text"> aswell as a <TEXTAREA> have an .onSelect event which you can capture. Then you can get the selected text using the method you find on this other StackOverflow Question: How to get selected text from textbox control with javascript

If you are working heavily in javascript I suggest you take a look at JQuery (if you haven't already). It will definitely make your life easier.

Writing a custom text box for web pages

1 Answers1