javascript

Question

我正在尝试制作一个函数，它将接受一个字符，即键盘上按下的键的值，将其转换为另一个特殊字符，并将其插入特定的输入字段（类似于模拟另一个键盘布局）。

例子:

用户在键盘上输入 x
函数接受这个字符并将其转换为ḫ
比函数将此字符插入特定的输入字段

我做了一个函数来转换那些特殊字符：

$("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。我对包括从输入字段中获取值然后将其字符转换为其他字符的解决方案不满意，因为如果发生这种情况，用户可以在半秒内看到发生的 "conversion process"。

Answer 1

如果对用户隐藏未转换的值，您必须使用事件 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">

Answer 2

首先，你不需要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>

javascript - 将字母字符从键盘事件转换为另一个字符并将新字符插入输入字段（在线键盘布局）

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

jquery

input

converters