我該如何製作一個簡潔的鍵盤包含雙重字體？

我正在爲幻想字母翻譯工具。這個想法是有一個屏幕鍵盤，每個按鈕都包含拉丁字母和需要翻譯的字母表中的每個字母。然後文本被髮送到兩個文本字段，（在任何文本框一個）輸入兩個字母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

我該如何製作一個簡潔的鍵盤包含雙重字體？

回答

相關問題