我做了一個有俄語字符和拉丁語字符的虛擬鍵盤。我想讓虛擬鍵盤上的每個字符鍵（.keyLetter）將俄文字符（.primary）插入文本欄位中。
此外，我想讓每個物理鍵盤的按鍵激活螢屏上的相應按鈕，這樣用戶就可以通過點擊螢屏上的按鍵或使用物理鍵盤來打字。
我想列印已經寫在.primary div中的字符，以避免為每個鍵創建一個獨特的函式。
我對JavaScript非常陌生，所以請對我寬容一些。我只是想找到最好的解決方案。。
CodePen 鏈接
const keyChar = document. getElementById('keyLetter')
keyChar.addEventListener('click', function(>/span>) {
//一旦鍵被點擊，將該鍵的.primary插入文本框中。
//span>但是如何區分呢？
})/*Body */
h1 {
margin: 3px;
padding: 3px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: rgb(233, 188, 188)
}
#content {
display: flex;
justify-content: center;
align-items: center;
}
#instructions {
display: flex;
flex-direction: column;
}
#instructions>h2 {
margin: 2px;
padding: 2px;
}
#instructions>p {
margin: 3px;
padding: 3px;
}
#inputTextWrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
position: relative;
top: 50px;
}
#instructions {
width: 50%;
}
#inputTextField {
width: 80%;
min-width: 800px;
max-width: 1000px;
border-radius: 8px;
border: none;
}
textarea#inputTextField {
resize: none;
最小高度: 100px;
height: auto;
box-shadow: inset 0 0 3px black;
padding: 1px;
}
.capsWarning {
top: 50px;
padding: 1px;
}
/* 鍵盤 */; }
button {
padding: 0;
margin: 1.5px;
height: 45px;
min-width: 22.5px;
border-radius: 5px;
border: none;
background: rgba(255, 255, 255, 0.70)
}
button:active {
background: rgba（255, 255, 255, 0.25）。
}
button.keyLetter {
width: 6%;
max-width: 45px;
}
button.keyWide {
width: 13%;
max-width: 125px;
}
button.keyXWide {
width: 45%;
max-width: 400px;
}
. keyboardFooter {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 5px 0;
background: rgb(238, 94, 94) 。
box-shadow。0 0 55px rgba（0, 0, 0, 0. 5）。)
用戶選擇：無。
transition: bottom 0.45s linear;
height: 200px;
}
.keyboardHide {
bottom: -100%;
}
.keyboardWrapper {
display: flex;
justify-content: center;
width: 100%;
height: 200px。
}
.鍵盤 {
width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4px;
}
. keyboardRow {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.buttonFlexWrapper {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.primary {
display: flex;
width: 75%;
height: 45px;
justify-content: center;
align-items: center;
font-size: large;
font-weight: bold;
}
.secondary {
display: flex;
width: 25%;
height: 45px;
justify-content: flex-end | center;
align-items: flex-end | center;
}
/* Mobile Overrides */
@media only screen and （max-width: 599px) {
#content {
flex-direction: 行。
flex-wrap: wrap;
}
#instructions,
#inputText {
width: 100%;
}
#inputTextField {
width: 80%;
min-width: 325px;
max-width: 350px;
}
.鍵盤 {
width: 100%;
}
.primary {
justify-content: center;
align-items: center;
}
.secondary {
justify-content: left;
align-items: left;
}
}<div class=" keyboardFooter" >
<div class=" keyboardWrapper">
<div class=" keyboard">
< div id="row1" class=" keyboardRow">
< button type="button" class="key keyLetter">
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Й</div>>
<div class="secondary"/span>> q</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ц</div>>
<div class="secondary"/span>> w</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> У</div>>
<div class="secondary"/span>> e</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> К</div>。
<div class="secondary"/span>> r</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Е</div>
<div class="secondary"/span>> t</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Н</div>
<div class="secondary"/span>> y</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Г</div>
<div class="secondary"/span>> u</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ш</div>
<div class="secondary"/span>> i</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Щ</div>>
<div class="secondary"/span>> o</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> З</div>>
<div class="secondary"/span>> p</div>p
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Х</div>>
<div class="secondary"/span>> [</div>]。
</div>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ъ</div>>
<div class="secondary"/span>> ]</div>>
</div>>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ё</div>>
<div class="secondary"/span>> </div>>
</div>/span>
</button>
</div>
< div id="row2" class=" keyboardRow">
< button type="button" class="key keyLetter">
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ф</div>
<div class="secondary"/span>> a</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ы</div>>
<div class="secondary"/span>> s</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> В</div>
<div class="secondary"/span>> d</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> А</div>。
<div class="secondary"/span>> f</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> П</div>>
<div class="secondary"/span>> g</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Р</div>>
<div class="secondary"/span>> h</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> О</div>>
<div class="secondary"/span>> j</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Л</div>
<div class="secondary"/span>> k</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Д</div>
<div class="secondary"/span>> l</div>>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ж</div>>
<div class="secondary"/span>> ;</div>>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Э</div>>
<div class="secondary"/span>>
</div>'span class="hljs-tag"></div>
</button>
</div>
< div id="row3" class=" keyboardRow">
< button type="button" class="key keyLetter">
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Я</div>>
<div class="secondary"/span>> z</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ч</div>
<div class="secondary"/span>> x</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> С</div>>
<div class="secondary"/span>> c</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> М</div>
<div class="secondary"/span>> v</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> И</div>И
<div class="secondary"/span>> b</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Т</div>Т
<div class="secondary"/span>> n</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ь</div>>
<div class="secondary"/span>> m</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Б</div>>
<div class="secondary"/span>> ,</div>>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ю</div>>
<div class="secondary">/span>。 </div>。
</div>/span>
</button>
< button type="button" class="key keyWide">
<i class=" material-icons"> backspace</i>
</button>/span>
</div>
< div id="row4" class=" keyboardRow">
< button type="button" class="key keyWide capsLock"> >。
<i class=" material-icons"> keyboard_capslock</i>。
<div class="keyLight" > </div>>
</button>
< button type="button" class="key keyXWide">/span>
<i class=" material-icons"> space_bar</i>。
</button>/span>
</div>
</div>/span>
</div>/span>
</div>/span>uj5u.com熱心網友回復：
你沒有任何id="keyLetter "的東西--你在每個上有一個類。
你需要委托。
我也實作了capslock
。我個人不會把div放在按鈕中。而是將 buttonFlexWrapper 樣式化為一個按鈕
。 。const keyboard = document. querySelector('.keyboard') 。
const output = document.getElementById("inputTextField") 。
const capslock = document.querySelector(".capsLock") 。
const capsWarning = document.querySelector(".capsWarning") 。
capslock.addEventListener("click"/span>,function(e) {
const tgt = e.target.closest("button") 。
tgt.classList.toggle（"active"）。
capsWarning.classList.toggle("hide", ! tgt.classList.contains("active") )
})
keyboard.addEventListener('click', function(e) {
const tgt = e.target.closest(".keyLetter") 。
if (tgt) {
const primary = tgt.querySelector(" .primary").textContent;
const secondary = tgt.querySelector(".secondary").textContent;
output.textContent = capsWarning.classList.contains("hide") ? primary : secondary 。
}
})/*Body */
h1 {
margin: 3px;
padding: 3px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: rgb(233, 188, 188)
}
#content {
display: flex;
justify-content: center;
align-items: center;
}
#instructions {
display: flex;
flex-direction: column;
}
#instructions>h2 {
margin: 2px;
padding: 2px;
}
#instructions>p {
margin: 3px;
padding: 3px;
}
#inputTextWrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
position: relative;
top: 50px;
}
#instructions {
width: 50%;
}
#inputTextField {
width: 80%;
min-width: 800px;
max-width: 1000px;
border-radius: 8px;
border: none;
}
textarea#inputTextField {
resize: none;
最小高度: 100px;
height: auto;
box-shadow: inset 0 0 3px black;
padding: 1px;
}
.capsWarning {
top: 50px;
padding: 1px;
}
/* 鍵盤 */; }
button {
padding: 0;
margin: 1.5px;
height: 45px;
min-width: 22.5px;
border-radius: 5px;
border: none;
background: rgba(255, 255, 255, 0.70)
}
button:active {
background: rgba（255, 255, 255, 0.25）。
}
button.keyLetter {
width: 6%;
max-width: 45px;
}
button.keyWide {
width: 13%;
max-width: 125px;
}
button.keyXWide {
width: 45%;
max-width: 400px;
}
. keyboardFooter {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 5px 0;
background: rgb(238, 94, 94) 。
box-shadow。0 0 55px rgba（0, 0, 0, 0. 5）。)
用戶選擇：無。
transition: bottom 0.45s linear;
height: 200px;
}
.keyboardHide {
bottom: -100%;
}
.keyboardWrapper {
display: flex;
justify-content: center;
width: 100%;
height: 200px。
}
.鍵盤 {
width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4px;
}
. keyboardRow {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.buttonFlexWrapper {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.primary {
display: flex;
width: 75%;
height: 45px;
justify-content: center;
align-items: center;
font-size: large;
font-weight: bold;
}
.secondary {
display: flex;
width: 25%;
height: 45px;
justify-content: flex-end | center;
align-items: flex-end | center;
}
/* Mobile Overrides */
@media only screen and （max-width: 599px) {
#content {
flex-direction: 行。
flex-wrap: wrap;
}
#instructions,
#inputText {
width: 100%;
}
#inputTextField {
width: 80%;
min-width: 325px;
max-width: 350px;
}
.鍵盤 {
width: 100%;
}
.primary {
justify-content: center;
align-items: center;
}
.secondary {
justify-content: left;
align-items: left;
}
}
.hide { display: none; }< h1>虛擬俄語鍵盤</h1>虛擬俄語鍵盤
<div id="inputTextWrapper"/span>>
< textarea id="inputTextField" class="textBox" > </textarea>>
<p class=" capsWarning hide" > <strong>CAPS鎖已開啟! </strong></p>
<!-Broken Feature-->
</div>/span>
<div class=" keyboardFooter">
<div class=" keyboardWrapper">
<div class=" keyboard">
< div id="row1" class=" keyboardRow">
< button type="button" class="key keyLetter">
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Й</div>>
<div class="secondary"/span>> q</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ц</div>>
<div class="secondary"/span>> w</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> У</div>>
<div class="secondary"/span>> e</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> К</div>。
<div class="secondary"/span>> r</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Е</div>
<div class="secondary"/span>> t</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Н</div>
<div class="secondary"/span>> y</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Г</div>
<div class="secondary"/span>> u</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ш</div>
<div class="secondary"/span>> i</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Щ</div>>
<div class="secondary"/span>> o</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> З</div>>
<div class="secondary"/span>> p</div>p
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Х</div>>
<div class="secondary"/span>> [</div>]。
</div>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ъ</div>>
<div class="secondary"/span>> ]</div>>
</div>>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ё</div>>
<div class="secondary"/span>> </div>>
</div>/span>
</button>
</div>
< div id="row2" class=" keyboardRow">
< button type="button" class="key keyLetter">
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ф</div>
<div class="secondary"/span>> a</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ы</div>>
<div class="secondary"/span>> s</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> В</div>
<div class="secondary"/span>> d</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> А</div>。
<div class="secondary"/span>> f</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> П</div>>
<div class="secondary"/span>> g</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Р</div>>
<div class="secondary"/span>> h</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> О</div>>
<div class="secondary"/span>> j</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Л</div>
<div class="secondary"/span>> k</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Д</div>
<div class="secondary"/span>> l</div>>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ж</div>>
<div class="secondary"/span>> ;</div>>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Э</div>>
<div class="secondary"/span>>
</div>'span class="hljs-tag"></div>
</button>
</div>
< div id="row3" class=" keyboardRow">
< button type="button" class="key keyLetter">
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Я</div>>
<div class="secondary"/span>> z</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ч</div>
<div class="secondary"/span>> x</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> С</div>>
<div class="secondary"/span>> c</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> М</div>
<div class="secondary"/span>> v</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> И</div>И
<div class="secondary"/span>> b</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Т</div>Т
<div class="secondary"/span>> n</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ь</div>>
<div class="secondary"/span>> m</div>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Б</div>>
<div class="secondary"/span>> ,</div>>
</div>/span>
</button>
< button type="button" class="key keyLetter">/span>
<div class="buttonFlexWrapper"/span>>
<div class="primary"/span>> Ю</div>>
<div class="secondary">/span>。 </div>。
</div>/span>
</button>
< button type="button" class="key keyWide">
<i class=" material-icons"> backspace</i>
</button>/span>
</div>
< div id="row4" class=" keyboardRow">
< button type="button" class="key keyWide capsLock"> >。
<i class=" material-icons"> keyboard_capslock</i>。
<div class="keyLight" > </div>>
</button>
< button type="button" class="key keyXWide">/span>
<i class=" material-icons"> space_bar</i>。
</button>/span>
</div>
</div>/span>
</div>/span>
</div>/span>uj5u.com熱心網友回復：
你試圖通過ID來獲取元素，但我沒有看到每個按鍵的具體ID。要知道區別，你應該為每個按鍵的div定義一個ID
這里有一個簡單的教程，介紹如何用HTML和Javascript使用dom
。轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320722.html
標籤：