javascript - Convert letter character from keyboard event to another character and insert that new character into input field (online keyboard layout)

Question

I am trying to make a function that will take a character, which is the value of the key pressed on the keyboard, convert it to another special character, and insert it into a particular input field (something like simulating another keyboard layout).

Example:

1. User type x on keyboard
2. The function takes this character and converts it into ḫ
3. Than function insert this character into a particular input field

I made a function which converts those special characters:

$("input").keydown(function(e){
    var keyCharacter = e.key;
});

var replaceFrom = [/A/, /i/, /a/, /s/, /z/, /S/, /q/, /H/, /x/, /X/, /T/, /D/];
var replaceTo = ["ꜣ", "j", "ꜥ", "s", "z", "š", "q", "ḥ", "ḫ", "ẖ", "ṯ", "ḏ"];

function transliterationConverter(user_input, transliteration_schema_to_replace, transliteration_schema_for_replace) {
    for (i = 0; i < transliteration_schema_to_replace.length; i++) {
        user_input = user_input.replace(new RegExp(transliteration_schema_to_replace[i], "g"), transliteration_schema_for_replace[i]);
    }
    return user_input;
}

var convertedKeyCharacter = transliterationConverter(keyCharacter, replaceFrom, replaceTo);

// Character typed by user: x
// Desired result in input field: ḫ

P.S. I am not happy with a solution that includes taking value from the input field and then converts its characters to other ones, because if that happening, the user can see the "conversion process" that is happening in half of a second.

Answer 1

In case of hiding not converted value from user, you gotta use event keypress,prevent default action and change each character manually, then append it to input value

UPDATED CHECK MY SOLUTION!!!

example:

let element = document.querySelector('#something');
const replaceFrom = {'A': 'ꜣ', 'i': 'j', 'a':'ꜥ' , 's': 's', 'z':'z', 'S': "š", 'q': "q", 'H': "ḥ"}



element.addEventListener('keypress',function(event) {
  event.preventDefault();
  let location  = this.selectionStart,
      result = '',newArr = [];
  let arr =  this.value.split('');
  let char = (typeof replaceFrom[event.key] == "undefined")?event.key:replaceFrom[event.key];
  arr.forEach((elem,index)=>{
    if(index == location ){
      newArr[index] = char;
      newArr[index+1] = elem;
    }
    else if(index>location)
      newArr[index+1] = elem;
    else
      newArr[index] = elem;
  })
  if(arr.length == 0)
    newArr[0] = char;
  else if(location == arr.length){
      newArr[location] = char;  
  }

  newArr.forEach(ch=>{
    result += ch;
  })
  this.value = result;
  this.selectionStart = location+1;
  this.selectionEnd = location+1;
})

<input id="something">

Answer 2

First of all, you don't need jQuery, in my example I use window.onload to attach a function to be run after the page load.

On page load, it will call bindEvents, this function is in charge of binding events on element within the DOM (which is now loaded).

Then if you only need to translate, you can make the translation readonly, and you can convert all the values at once.

I have replaced your two arrays with an object behaving like a Map, because it is a 1 to 1 relationship and it is easier to maintain and to read.

window.onload = function init() {
  bindEvents();
}

function bindEvents() {
  document.querySelector('textarea[name="original"]').addEventListener('keyup', updateTranslation, true);
}


const translationMap = {
  A: 'ꜣ',
  i: 'j',
  a: 'ꜥ',
  s: 's',
  z: 'z',
  S: 'š',
  q: 'q',
  H: 'ḥ',
  x: 'ḫ',
  X: 'ẖ',
  T: 'ṯ',
  D: 'ḏ'
}

function updateTranslation(e) {
  const txtArea = document.querySelector('textarea[name="original"]');
  let txt = txtArea.value;
  let newTxt = '';
  
  for(let i = 0; i < txt.length; i += 1) {
    newTxt += translationMap[txt[i]] ? translationMap[txt[i]] : txt[i];
  }
  
  txtArea.value = newTxt;
}

h3 {
  text-align: center;
}

textarea {
  width: 100%;
  height: 150px;
  margin: 5px;
}

<div class="half-width">
  <h3>Input into special transliteration letters used by Egyptologists for representing hieroglyphs as letters</h3>
  <textarea name="original" placeholder="type here"></textarea>
</div>