Pure Javascript, no jquery

Question

i am making an onscreen keyboard, im stuck making codes with capslock key and shift key..anyone?

heres my code:

function number_write(x){
    var text_box = document.getElementById("number");
    if(x=='tab')
        text_box.value=text_box.value+'\t';
    else if(x=='enter')
        text_box.value=text_box.value+'\n';
    else if(x=='backspace')
        text_box.value=text_box.value.slice(0,-1);
    else text_box.value = text_box.value+x;
}

can you please add that code for caps lock and shift?thanks...

An on screen keyboard that requires shift and caps lock keys? Typically it would have a button to switch the UI to uppercase/special chars instead of relying on the keyboard. — MrCode, Jan 08 '13 at 07:32
ive googled and only found jquery and something with innerHTML..i want to be different from both keyboards.. — Christian Busaco, Jan 08 '13 at 07:42
@ChristianBusaco take a look in my answer, I think I've solved your puzzle question. The `function` you are looking for is the one that make a character upper case, right? — Gabriel Gartz, Jan 08 '13 at 07:59

mplungjan · Answer 1 · 2013-01-08T08:51:01.883

1

Are you looking for this (assuming x is the key event)

x.shiftKey
x.ctrlKey
x.altKey

They are pretty googleable

http://javascript.about.com/od/byexample/a/events-keymodifier-example.htm

if (x.which==bla && x.shiftKey)...

edited Jan 08 '13 at 08:51

answered Jan 08 '13 at 07:31

mplungjan

169,008
28
173
236

please bear with me im only a beginner...wat do you mean?if i press capslock, convert to uppercase..and also with the shift key converts then it includes the symbols..only capslock and left/right shift key only..thanks – Christian Busaco Jan 08 '13 at 07:33

score 0 · Answer 2 · edited May 23 '17 at 12:18

You are searching for a String.prototype.toUpperCase()

Example:

var x = 's';
x.toUpperCase();
console.log(x); // 'S'

That's the CapsLock/Shift "function".

But you are reinventing the wheel.

Looks like you are checking in a element to pass for a function that will change the value in your input element.

So if you want to do a "keyboard" will be easier if you use Event Triggers from Javascript.

Check this post about stimulation keys.

Now you can just map your "virtual keyboard" to trigger key simulations in other element.

For CapsLock you will need to use the force it parameters in your event.

Here is the reference for keydown event. So you can construct your own, using or not, shift/CapsLock/Alt...

Finally you can search for Javascript Virtual Keyboard on google, you may find projects like this: https://github.com/cantrell/VirtualKeyboard

Pure Javascript, no jquery

2 Answers2