I want to capture input charcters in text box, convert then according to a table and put them back in text box as user types.

<form id='myForm'>

Enter phone number:<input type="text" id='idMyText' name="myText" onKeyUp="alphaToNum(this.value)">
</form>




<script>
// on each keypress in input box, I want to capture key pressed,
// determine if key pressed belong to group of identified characters
// if, so then convert to specified numeric equivalent and return character 
// to text box.
// This mapping corresponds to numeric characters on blackberry device.
// Normally user has to press alt+letter to get numbers. This will provide
// quicker access to numeric characters on for numeric fields

function alphaToNum(e) {
 x = e;
 x = (x.replace(/W/, "1"));
 x = (x.replace(/E/, "2"));
 x = (x.replace(/R/, "3"));
 x = (x.replace(/S/, "4"));
 x = (x.replace(/D/, "5"));
 x = (x.replace(/F/, "6"));
 x = (x.replace(/Z/, "7"));
 x = (x.replace(/X/, "8"));
 x = (x.replace(/C/, "9")); 
 document.getElementById('idMyText').value = x; 
}

</script> 

I want to capture input charcters in text box, convert then according to a table and put them back in text box as user types.

<form id='myForm'>

Enter phone number:<input type="text" id='idMyText' name="myText" onKeyUp="alphaToNum(this.value)">
</form>




<script>
// on each keypress in input box, I want to capture key pressed,
// determine if key pressed belong to group of identified characters
// if, so then convert to specified numeric equivalent and return character 
// to text box.
// This mapping corresponds to numeric characters on blackberry device.
// Normally user has to press alt+letter to get numbers. This will provide
// quicker access to numeric characters on for numeric fields

function alphaToNum(e) {
 x = e;
 x = (x.replace(/W/, "1"));
 x = (x.replace(/E/, "2"));
 x = (x.replace(/R/, "3"));
 x = (x.replace(/S/, "4"));
 x = (x.replace(/D/, "5"));
 x = (x.replace(/F/, "6"));
 x = (x.replace(/Z/, "7"));
 x = (x.replace(/X/, "8"));
 x = (x.replace(/C/, "9")); 
 document.getElementById('idMyText').value = x; 
}

</script> 

• javascript
• onkeyup
• keystrokes

• A sidenote, of which you are probably aware, but just for future reference: when you validate, or ensure certain character-sets trough JavaScript, that is about the same as no validation. You should treat it only as a nice service to users, but never as a protection against certain characters being posted. Such validation should always be acpanied with validation on the serverside. – berkes Commented Oct 6, 2010 at 14:13

3 Answers 3

Should do the trick. Now works wherever caret is and even when you copy/paste WECZ into field (if that matters)

var conversionMap = {W:1,E:2,R:3,S:4,D:5,F:6,Z:7,X:8,C:9};
function alphaToNum(){
    var field = document.getElementById('idMyText');
    var value = field.value.split('');
    var i = 0, len = value.length;

    for(i;i<len;i++){
        if (conversionMap[value[i]]) {
            value[i] = conversionMap[value[i]];
        }
    }
    field.value = value.join('');
    // prevent memory leak.
    field = null;
}

** Edit after Tim Downs ment **

It might be better to do this when the value changes in the input, rather than when the key is pressed. Otherwise, other forms of input (pasting value) will bypass this substitution.

Should do the trick. Now works wherever caret is and even when you copy/paste WECZ into field (if that matters)

var conversionMap = {W:1,E:2,R:3,S:4,D:5,F:6,Z:7,X:8,C:9};
function alphaToNum(){
    var field = document.getElementById('idMyText');
    var value = field.value.split('');
    var i = 0, len = value.length;

    for(i;i<len;i++){
        if (conversionMap[value[i]]) {
            value[i] = conversionMap[value[i]];
        }
    }
    field.value = value.join('');
    // prevent memory leak.
    field = null;
}

its working good until we didn't use utf-8 chars like öéáí etc... any idea for repair this "leak" ?