<arabic-keyboard>customElements not supported</arabic-keyboard>
<script type="text/javascript">//<![CDATA[
class ArabicKeyboard extends HTMLElement{
constructor(){
super()
var root = this.attachShadow({mode:"closed"});
var english = "1234567890`!@#$%^&*()_+-=qwertyuiop[]\|asdfghjkl;'zxcvbnm,./";
var arabic = "١٢٣٤٥٦٧٨٩٠`!@#$%^&*()_+-=ضصثقفغعهخحجد\|شسيبلاتنمكطئءؤرﻻىةوزظ";
var ce = (e) => document.createElement(e);
var TextView = ce("textarea");
TextView.value = `||||||||||||||||||||||||||||||||||||||||||||||||
| # |--------------------------------------| # |
| # |--------------------------------------| # |
| # |-- ارقام عربية: ٠١٢٣٤٥٦٧٨٩ --| # |
| # |-- ارقام إنجليزية: ٠١٢٣٤٥٦٧٨٩ --| # |
| # |--------------------------------------| # |
| # |--------------------------------------| # |
||||||||||||||||||||||||||||||||||||||||||||||||`;
var center = ce('center');
TextView.oninput = ()=>{
TextView.value.split('').forEach((char) => {
if(arabic[english.split('').indexOf(char)])
TextView.value = TextView.value.replace(char,arabic[english.split('').indexOf(char)]);
});
}
TextView.className = "textview";
TextView.rows = 8;
var style = ce('style');
style.innerHTML = `
center{
display: grid;
grid-template-columns: repeat(9, minmax(100px,11.1111111%));
grid-template-rows: 50px
}
*{
padding-left:auto;
padding-right:auto;
}
.key{
font-family: 'IBM Plex Sans', sans-serif;
border-radius: 2px;
text-align: center;
border: 1px solid silver;
font-size: 6vh;
margin: 1px;
background:#1d233b;
padding: 5px;
outline: 0;
color:#FFF;
cursor: pointer;
}
.key:hover{
color: turquoise;
}
.key:hover span{
color: #dddddd;
}
.key:active{
background: white;
}
.key span{
color: silver;
font-size: 3vh;
margin: 1h;
padding: 1px;
}
.textview{
width: 100%;
direction: rtl;
background:#1d233b;
color:#fff;
}
`;
root.appendChild(style);
root.appendChild(TextView);
root.appendChild(ce('br'));
english.split('').forEach( char => {
var key = ce('button');
let keychar = char;
key.className = 'key';
key.innerHTML = arabic[english.split('').indexOf(char)] + '<span>'+ char +'<span>';
key.onclick = ()=>{
this.typeInTextarea(TextView,arabic[english.split('').indexOf(keychar)]);
}
center.appendChild(key);
});
var keyline = ce('button');
keyline.className = 'key';
keyline.innerHTML = 'سطر <span>line</span>';
keyline.onclick = ()=>{
this.typeInTextarea(TextView,"\n");
}
center.appendChild(keyline);
root.appendChild(center);
}
typeInTextarea(el, newText) {
var start = el.selectionStart
var end = el.selectionEnd
var text = el.value
var before = text.substring(0, start)
var after = text.substring(end, text.length)
el.value = (before + newText + after)
el.selectionStart = el.selectionEnd = start + newText.length
el.focus()
}
}
customElements.define('arabic-keyboard',ArabicKeyboard)
//]]></script>
html, body {
background:#1d233b;
color:#fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.