<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;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.