javascript - capture input and convert characters

Question

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>

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 accompanied with validation on the serverside. — berkes, Oct 06 '10 at 14:13

BGerrissen · Accepted Answer · 2010-10-06T15:04:22.487

6

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 comment **

edited Oct 06 '10 at 15:04

answered Oct 06 '10 at 14:37

BGerrissen

21,250
3
39
40

1

That won't work if the caret is not at the end of the input text. – Tim Down Oct 06 '10 at 14:51

score 0 · Answer 2 · edited Jan 28 '15 at 14:17

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" ?

score 0 · Answer 3 · answered Oct 06 '10 at 14:24

0

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.

answered Oct 06 '10 at 14:24

Martin Peck

11,440
2
42
69

prefer on key press event because users will catch on more quickly. i am not too worried about cut and paste becuase this is used mostly on blackberry devices. – robert Oct 06 '10 at 14:29

javascript - capture input and convert characters

3 Answers3

Linked