将键盘事件中的字母字符转换为另一个字符，并将该新字符插入输入字段(联机键盘布局)

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

附言我对包括从输入字段中获取值然后将其字符转换为其他字符的解决方案不满意，因为如果发生这种情况，用户可以看到半秒内发生的"转换过程"。

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，并且可以一次转换所有值。

我用一个行为像Map的对象替换了你的两个arrays，因为它是 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>