如何创建阿拉伯键盘的脚本

Question

我试图创建一个阿拉伯键盘脚本，我想当我点击它显示在texterea字段中的一个字母时，我不知道如何开始。我添加了一个onclick="；alpha("("；函数，但我不知道如何使用。

<style type="text/CSS">
#Layer1 {
position:absolute;
left:263px;
top:100px;
width:176px;
height:147px;
z-index:1;
}
</style>

<div id="Layer1">
<div class="form-group">
<label>Clavier Arab <span class="text-hightlight"></span></label>
<textarea type="text" name="description" class="form-control" dir="rtl" style="height: 200px;width:850px;" placeholder="أكتب بالعربية" />
</textarea>
</div>
<table width="100%" height="100%">
<tbody>
<tr>
<td valign="middle">
<table width="100%" align="center" style="border:3px #009900 double" bgcolor="#FFFFFF">
<tbody>
<tr>
<td colspan="2">
<table width="100%" cellpadding="10" cellspacing="10" align="center">
<tbody>
<tr align="center">
<td>
<input width="100%" type="button" value="ض" onclick="alpha('ض')" class="btn btn-outline-primary">
</td>
<td>
<input type="button" value=" ز " onclick="alpha('ز')" class="btn btn-outline-primary">
</td>
<td>
<input type="button" value=" ر " onclick="alpha('ر')" class="btn btn-outline-primary">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

Event Delegation比使用HTMLonclick属性在键盘按钮上提供单独的事件侦听器更适合此任务。

代码片段提供了一个将单击的字符按钮添加到文本区域内容的示例，但可能需要进行更改以更好地满足您的要求和编码标准：

document.getElementById("clavier").addEventListener("click", event => {
const target = event.target;
if( target.classList.contains("btn")) {
keyClick(target.value);
}
});
const textarea = document.querySelector("#Layer1 textarea");
function keyClick(key) {
textarea.value += key;
}

<style type="text/CSS">
#Layer1 {
position:absolute;
left:263px;
top:100px;
width:176px;
height:147px;
z-index:1;
}
</style>

<div id="Layer1">
<div class="form-group">
<label>Clavier Arab <span class="text-hightlight"></span></label>
<textarea type="text" name="description" class="form-control" dir="rtl" style="height: 200px;width:850px;" placeholder="أكتب بالعربية"></textarea>
</div>
<table width="100%" height="100%" id="clavier">
<tbody>
<tr>
<td valign="middle">
<table width="100%" align="center" style="border:3px #009900 double" bgcolor="#FFFFFF">
<tbody>
<tr>
<td colspan="2">
<table width="100%" cellpadding="10" cellspacing="10" align="center">
<tbody>
<tr align="center">
<td>
<input width="100%" type="button" value="ض" class="btn btn-outline-primary">
</td>
<td>
<input type="button" value="ز" class="btn btn-outline-primary">
</td>
<td>
<input type="button" value="ر" class="btn btn-outline-primary">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

Answer 2

// Get the textarea
let textarea = document.getElementById('textarea');
(function(){

// Array to hold the HTML output (in this case: alphabet letters (buttons))
let output = [];
function drawAlphabet(){
// foreach letter create a button
arabicAlphabet.forEach(letter => {
let alphabetBtn = `<button value="${letter}" class="alphabetBtn">${letter}</button>`;
output.push(alphabetBtn);
});

// Push the buttons to the #buttons-container
btnsContainer.innerHTML = output.join('');
}

// Get the buttons container
let btnsContainer = document.getElementById('buttons-container');
// The Arabic alphabet array
const arabicAlphabet =["ي", "و", "ه", "ن", "م", "ل" ,"ك", "ق", "ف", "غ", "ع", "ظ", "ط", "ض", "ص", "ش" ,"س", "ز", "ر", "ذ", "د", "خ", "ح", "ج", "ث", "ت", "ب", "أ"];

// Run the function
drawAlphabet();
})();
// Get the buttons 
let myBtns = document.querySelectorAll('.alphabetBtn');
// foreach clicked button, add it's value to the textarea
myBtns.forEach(btn => {
btn.addEventListener('click', () => {
textarea.innerHTML += btn.getAttribute("value");
});
});

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 10px;
font-family: 'Arial', sans-serif;
}
a, button {
text-decoration: none;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
}
#textarea {
width: 500px;
height: 200px;
margin-bottom: 30px;
direction: rtl;
padding: 10px;
font-size: 1.2rem;
}
.alphabetBtn {
font-size: 1.5rem;
width: 50px;
margin: 2px 2px;
}

<div class="wrapper">
<textarea id="textarea"></textarea>
<div id="buttons-container"></div>
</div>