how to add keyboard event to text box when text box is read only in javascript?

Question

i have made on textbox which is readonly. I want that when user press a number from keyboard then they are entered in textbox. I have applied onkeyup() event in the text box but it is not working.

<input type="text" id="screen" value="0" onkeyUp="myFunction(event)" readonly=true; >

function myFunction(event){
    if ( event.keycode >= 48 && event.keycode <=57 ) {
        //some code here
    }

}

Maybe better with <input type="number"> or <input pattern="\d+">? — Passerby
– Passerby, Commented Feb 10, 2014 at 9:49

Sgoldy · Accepted Answer · 2014-02-10 09:54:56Z

2

First of all, it's keyCode and not keycode, and you can go with something like

window.addEventListener("keyup", function(e) {
    if ( e.keyCode >= 48 && event.keyCode <=57 ) {
            document.getElementById("screen").value += String.fromCharCode(e.keyCode);
        }
}, false);

http://jsfiddle.net/npCBs/

Do note that only the upper number keys will work, and not the num pad.

answered Feb 10, 2014 at 9:54

Sgoldy

7965 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sgoldy Over a year ago

Listen to keyCodes between 96 to 105, if clicked, substract 48 from the keyCode and then get the result by String.fromCharCode

mohitsahu Over a year ago

which event(keyup,keydown,keypress) should i use so that it works fine on all browser?

anurupr · Accepted Answer · 2014-02-10 09:56:18Z

0

readonly attribute specifically means that no input is to be accepted by the input that has the readonly attribute.

try adding the onkeyup attribute to body. the tradeoff is that any keyboard event will be captured

<body onkeyUp="myFunction(event)">
...
 <input type="text" id="screen" value="0"  readonly=true; >            
...
</body>

this should call the myFunction everytime user presses a key.

answered Feb 10, 2014 at 9:56

anurupr

2,3442 gold badges20 silver badges29 bronze badges

Collectives™ on Stack Overflow

how to add keyboard event to text box when text box is read only in javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related