我该如何制作一个简洁的键盘包含双重字体？

我正在为幻想字母翻译工具。这个想法是有一个屏幕键盘，每个按钮都包含拉丁字母和需要翻译的字母表中的每个字母。然后文本被发送到两个文本字段，（在任何文本框一个）输入两个字母simultaneousley，从而能够转化俱进拉丁字母和进入幻想的字体，这取决于你的翻译需要我该如何制作一个简洁的键盘包含双重字体？

Concept art.. yikes

我有基本的HTML全部制定出来了，并且我有很多字体我想用于此（通过CSS来处理），但实际的功能无法实现。

我基本上要按下一个按钮把相同的字符到两个文本域，每个textarea的显示相同的文本，因为它正在打字，但在不同的字体/字母表

<div ID="keyboard"> 
    <div id="button-row1"> 
    <button class="letter" ID="_a" value="A"> 
    <span class="latinFont">A</span> | <span class="specialFont">A</span> 
    </button> 
    <button class="letter" ID="_b" value="B"> 
    <span class="latinFont">B</span> | <span class="specialFont">B</span> 
    </button> 
    <button class="letter" ID="_c" value="C"> 
    <span class="latinFont">C</span> | <span class="specialFont">C</span> 
    </button> 
    <button class="letter" ID="_d" value="D"> 
    <span class="latinFont">D</span> | <span class="specialFont">D</span> 
    </button> 
</div> 

</div> 

<div class="TypedTextFields" ID="TypedTextField"> 
    <textarea class="LatinTextField" Name="LatinLetters" readonly></textarea> 
<br/> 
<textarea class="SpecialTextField" Name="SpecialLetters" readonly></textarea> 
</div>

来源

2017-09-28 Mia Wendelboe Dalsgaard

希望这段代码能帮助你。

var buttons = document.querySelectorAll('.letter'); 
 
var inputL = document.querySelector('.LatinTextField'); 
 
var inputS = document.querySelector('.SpecialTextField'); 
 
buttons.forEach(function(button){ 
 
    button.addEventListener('click', function(){ 
 
    switch(this.value){ 
 
     case 'bcsp': 
 
     inputL.value = inputL.value.substring(0, inputL.value.length - 1); 
 
     break; 
 
     case 'enter': 
 
     inputL.value += '\n'; 
 
     break; 
 
     default: 
 
     inputL.value += this.value; 
 
    } 
 
    
 
    inputS.value = inputL.value; 
 
    }) 
 
});

/**** 
 
* Add your latin and special fonts * 
 
****/ 
 

 
.latinFont { 
 
    /* use your latin font-family name */ 
 
    font-family: 'Times New Roman'; 
 
} 
 
.specialFont { 
 
    /* use your spacial font-family name */ 
 
    font-family: Impact; 
 
}

<div ID="keyboard"> 
 
    <div id="button-row1"> 
 
    <button class="letter" ID="_a" value="A"> 
 
    <span class="latinFont">A</span> | <span class="specialFont">A</span> 
 
    </button> 
 
    <button class="letter" ID="_b" value="B"> 
 
    <span class="latinFont">B</span> | <span class="specialFont">B</span> 
 
    </button> 
 
    <button class="letter" ID="_c" value="C"> 
 
    <span class="latinFont">C</span> | <span class="specialFont">C</span> 
 
    </button> 
 
    <button class="letter" ID="_d" value="D"> 
 
    <span class="latinFont">D</span> | <span class="specialFont">D</span> 
 
    </button> 
 
    <button class="letter" ID="_enter" value="enter"> 
 
    <span>&lt;-|</span> 
 
    </button> 
 
    <button class="letter" ID="_bcsp" value="bcsp"> 
 
    <span>&lt;-</span> 
 
    </button> 
 
</div> 
 

 
</div> 
 

 
<div class="TypedTextFields" ID="TypedTextField"> 
 
    <textarea rows="4" class="LatinTextField latinFont" Name="LatinLetters" readonly></textarea> 
 
<br/> 
 
<textarea rows="4" class="SpecialTextField specialFont" Name="SpecialLetters" readonly></textarea> 
 
</div>

来源

2017-09-28 20:04:19

这是确切的解决方案，我希望能找到，但我发现我是缺乏一种特殊类型的按钮......我如何才能退格的功能？它是一个字符串-1，但我的微弱尝试迄今为止尚未结实 –

if（this.id ==“_bcksp”）{inputL.value = inputL.value.substring（0，str.length - 1）; inputS.value = inputS.value.substring（0，str.length - 1）; } else { inputL.value + = this.value; inputS.value + = this.value; } 这是退格脚本，因为它现在看起来 - 无功能 –

if（this.id ==“_bcksp”）{inputL.value = inputL.value.substring（0，inputL.value.length - 1）; } else {inputL.value + = this.value;} inputS.value = inputL.value;我重构你的代码。 inputS.value始终与inputL.value相同 –

我认为你可以做到这只需在textareas上使用CSS即可。例如：

.LatinTextField { 
    font-family: 'Some Font'; 
} 
.SpecialTextField { 
    font-family: 'Some Other Font'; 
}

然后在你的javascript中，你可以对textareas做同样的事情，并且CSS不会举重。还值得注意的是，为每个元素全局设置变量将有助于提高性能，因为每次调用函数时都不会填充对象。这里是一个基本的例子：

<a onclick="addText('A');"> 
<span class="latinFont">A</span> | <span class="specialFont">A</span> 
</a> 
<textarea id="LatinTextField" Name="LatinLetters" readonly></textarea> 
<textarea id="SpecialTextField" Name="LatinLetters" readonly></textarea> 

<script> 
var latin = document.getElementById('LatinTextField'); 
var special = document.getElementById('SpecialTextField'); 
function addText(letter) { 
    latin.innerHTML += letter; 
    special.innerHTML += letter; 
} 
</script>

来源

2017-09-28 19:53:35

我该如何制作一个简洁的键盘包含双重字体？

回答

相关问题