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: ḫ

P.S。我不满意这样一种解决方案，该解决方案包括从输入字段获取值，然后将其字符转换为其他字符，因为如果发生这种情况，那么用户可以在半秒钟内看到正在发生的“转换过程”。

Answer 1

首先，您不需要jQuery，在我的示例中，我使用window.onload附加要在页面加载后运行的函数。

在页面加载时，它将调用bindEvents，此函数负责在DOM（现已加载）中的元素上进行绑定事件。

然后，如果您只需要翻译，则可以进行翻译readonly，并且可以一次转换所有值。

我已经用一个像arrays的对象替换了您的两个Map，因为它是一对一的关系，并且更易于维护和阅读。

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