javascript - преобразование буквенного символа из события клавиатуры в другой символ и вставка этого нового символа в поле ввода (интерактивная раскладка клавиатуры)

Question

Я пытаюсь создать функцию, которая будет принимать символ, который представляет собой значение клавиши, нажатой на клавиатуре, преобразовывать ее в другой специальный символ и вставлять в определенное поле ввода (что-то вроде имитации другой раскладки клавиатуры). ).

Пример :

1. Тип пользователя x на клавиатуре
2. Функцияберет этот символ и преобразует его в ḫ
3. Чем функция вставляет этот символ в определенное поле ввода

Я сделал функцию, котораяпреобразует эти специальные символы:

$("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: ḫ

PS Мне не нравится решение, которое включает в себя получение значения из поля ввода, а затем преобразовывает его символы в другие, потому что если это произойдет, пользователь может увидеть "Процесс преобразования ", который происходит за полсекунды.

Answer 1

Прежде всего, вам не нужен jQuery, в моем примере я использую window.onload, чтобы прикрепить функцию, запускаемую после загрузки страницы.

При загрузке страницы она вызовет bindEventsэта функция отвечает за привязку событий к элементу в DOM (который теперь загружен).

Тогда, если вам нужно только перевести, вы можете сделать перевод readonly, и вы можете преобразоватьвсе значения сразу.

Я заменил ваши два arrays на объект, ведущий себя как Map, потому что это отношение 1 к 1, и его легче поддерживать и читать.

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>

Answer 2

В случае сокрытия от пользователя не преобразованного значения, вам нужно использовать событие keypress, запретить действие по умолчанию и изменить каждый символ вручную, а затем добавить его к входному значению

ОБНОВЛЕНО ПРОВЕРЬТЕ МОЕ РЕШЕНИЕ !!!

пример:

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