1

Currently i am doing a project with remapping characters to words by detecting the keyup function. Unfortunately, i have only been able to retrieve the first character and remap to the word i want. In my project, i need to directly retrieve all of my keyboard input and directly convert it to the word that i want within the same textarea. For example when i type in the textarea, it will convert to "are" directly. I don't know why it stopped retrieving the second character and remapping not function. Below is my code, hope someone can tell me my error. Thank you.

<textarea class="width-100" id="translated-text"  onkeyup="myFunctionkey(event);" rows="10"></textarea>
<script>
function myFunctionkey(e) {
conversion();
}

function conversion(){
var x = document.getElementById('translated-text');
if(x.value == 'a'){
x.value='yes';
}
if(x.value == 'q'){
x.value = 'are';
}
}
</script>
user2359110
  • 77
  • 8

2 Answers2

3

From what I understand, you only want to grab the input and replace a key stroke with a complete word.

Maybe this will do. I've changed onkeyup to onkeypress because this is more reliable from what I remember.

<textarea id="translated-text" cols="50" rows="10" onkeypress="replaceInputChar(event);"></textarea>
<script type="text/javascript">
    //create replacement map
    var map = {
        "a": "and",
        "b": "bold",
        "c": "change"
    };


    function replaceInputChar(e)
    {
        var ctl = document.getElementById("translated-text"); //control
        var char = String.fromCharCode(e.keyCode); //typed char

        if (char in map) //check if letter is defined in map
        {
            //insert replacement instead of letter
            if("selectionStart" in ctl)
            {
                //in modern browsers we can easily mimic default behavior at cursor position
                var pos = ctl.selectionStart;
                ctl.value = ctl.value.substr(0, pos) + map[char] + ctl.value.substr(ctl.selectionEnd);
                ctl.selectionStart = pos + map[char].length;
                ctl.selectionEnd = ctl.selectionStart;
            }
            else
                ctl.value += map[char];

            if ("preventDefault" in e) //modern browser event cancelling
                e.preventDefault();
            else
            {
                //old browser event cancelling
                e.returnValue = false; //IE8
                return false;
            }
        }
    }
    </script>
Sven Fab
  • 46
  • 5
  • thank you for teaching new method. i now able to mapping with what i want. once again thanks – user2359110 Jun 14 '15 at 09:35
  • You're welcome! I've fixed IE8 event cancelling and added default inserting behavior (at cursor position and replacing selection) for modern browsers. – Sven Fab Jun 14 '15 at 13:50
  • How about if i like to set combo key together? let say shift+ a will come out different word? Thank you for kind guideline – user2359110 Jun 15 '15 at 04:10
  • For shift it would suffice to add `"A": "myAShiftWord"` etc. to the map. If you want it more complicated: `e.shiftKey` should give you the shift status. There are also `e.altKey` and `e.ctrlKey` if you want to use those. But then you need to implement some additional logic, for example expand your key in the map from 'a' to 'CTRL+a' and calculate `char` accordingly. – Sven Fab Jun 15 '15 at 15:15
0

You should use comparison operator '==' instead of assignment operator '=' while remapping the value, like this: 

x.value=='a'

Edit:

You should check the updated code for your problem here: https://jsfiddle.net/o4coLr5t/1/

Now, the characters you choose to remap in javascript will display the string, that you map the character to. Otherwise it will display nothing on pressing keys. So, try and add all the character keycodes to the javascript code. Hope that helps.

Manu
  • 2,251
  • 19
  • 30