I need Helppppppp to lower character in Text Input Test


in TextInputTest of cocos2d-x html5, when i type keyboard, all character in screen are UPPER, can i lower them???thanks for your help


there is 2 kinds of keyboard input

keyboard input detection for control
this type of input takes each keydown as a keycode, where "A’ is same as ‘a’, ‘1’ is same as ‘!’

another kind is for entering characters.

if you only need the input for the web, then you can simply add a HTML input box, textarea etc.


I think, CCTextFieldTTF is intended to be used for text input, so i was surprised that in html5 branch it can not be used for that.
CCTextFieldTTF uses CCKeybordDispatcher for detecting input. But CCKeybordDispatcher deliver keybord input as “for control detection” (like was mentioned before).
For example, if you press SHIFT+1 on keybord, text field gets ‘shift’ and ‘1’ key presses separetly and show “1” (“shift” will be skipped) instead of “!”.
Quick and dirty fix would be changing CCKeybordDispatcher cc.KeyboardDispatcher.getInstance function to:

cc.KeyboardDispatcher.getInstance = function () {
    if (!cc.keyboardDispatcher) {
        cc.keyboardDispatcher = new cc.KeyboardDispatcher();
        //make canvas focusable
        cc.canvas.setAttribute('tabindex', 1);
        cc.canvas.style.outline = 'none';
        cc.canvas.style.cursor = 'default';

        cc.canvas.addEventListener("keypress", function (e) {
            cc.keyboardDispatcher.dispatchKeyboardMSG(e, true);

        cc.canvas.addEventListener("keydown", function (e) {
                cc.keyboardDispatcher.dispatchKeyboardMSG(e, true);
    return cc.keyboardDispatcher;

(Changed: Listen to “keypress” instead of “keydown”; allow user to use BACKSPACE (keyCode==8 branch) without pressing BACK in Chrome)

This allows using of lowercase letters and punctuations.

Proper solution would be: make CCKeybordDispatcher support (allow subscription to) both “for control detection”~~like and “text input”~~like events.

If you want to use other languages (i.e. russian) in CCTextFieldTTF you can change CCIMEDispatcher.js cc.IMEDispatcher’s processKeycode function like this:

if (keyCode < 32) {
...// No changes here
} else //if (keyCode < 255) { << comment this
    this.dispatchInsertText(String.fromCharCode(keyCode), 1);
//} else { // and this branch
//  //

to allow letters with keyCode >= 255.


Hi Alexander,

Can you please send me code of your textfield, I also need text input boxes in my game. Please if you send me code for text input box where i can specify tab index also.

Thanks in advance.


Hi Aparajita,

Here are files from my project.

As for tab index, I think CCTextFieldTTF does not support tab index directly because all CCTextFieldTTF gets keyboard messages from singleton CCKeyboardDispatcher wich register one event listener for canvas with certain tab index.
If you want you can try to implement similar behavior - in CCIMEDispatcher.js in processKeycode method there is branch on receiving tab key.

processKeycode:function (keyCode) {
if (keyCode < 32) {
    if (keyCode == cc.KEY.backspace) {
    } else if (keyCode == cc.KEY.enter) {
        this.dispatchInsertText("\n", 1);
    } else if (keyCode == cc.KEY.tab) {
        //tab input <<<< HERE
        //you can add this.dispatchTabPressed(); //or something

Or you can use HTML input box as Hao Wu suggested.