"Arabic Keyboard"
Bootstrap 4.1.1 Snippet by harunpehlivan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="app"> <div class="container"> <div class="jumbotron"> <h1>Arabic Keyboard</h1> <Screen></Screen> <Keyboard :numerals="numerals" :keys="keys" :special="special" :remaining="remaining" > </Keyboard> </div> </div> </div> <template id="screen"> <div id="screen-component"> <textarea placeholder="...Waiting for input" readonly dir="rtl" class="form-control" rows="5" autofocus>{{letters}}</textarea> </div> </template> <template id="keyboard"> <div id="keyboard-component"> <tr> <div id="numbers"> <span v-for="number in numerals"> <button id="nums" @click="addLetter(number.l)">{{number.l}}</button> </span> </div><br> <div id="keys"> <span v-for="letter in keys"> <button id="key" @click="addLetter(letter.l)">{{letter.l}}</button> </span> </div> <div id="sp"> <span v-for="letter in special"> <button id="special" @click="addLetter(letter.k)">{{letter.k}}</button> </span> </div> </tr> </div> </template>
textarea{ resize: none; } .form-control{ cursor: text !important; background-color: white !important; font-size: 30px !important; border: 1px solid darkgray !important; box-shadow: 2px 2px 2px gray !important; } #keyboard-component{ margin-top: 15px; } h1{ text-align: center; font-family: 'Lato', sans-serif !important; color: black !important; } #key{ width: 90px; height: 50px; margin-left: 5px; margin-top: 5px; text-shadow: 2 2px 2 lightgray; color: white; font-size: 25px; font-weight: bolder; background-color: black; border-radius: 5px; border: 1px solid darkgray; border: 1px solid darkgray; box-shadow: 5px 5px 10px gray; } #sp{ margin-left: 20%; margin-top: 10px; } #nums{ width: 90px; height: 50px; margin-left: 5px; margin-top: 5px; text-shadow: 2 2px 2 lightgray; color: white; font-size: 25px; font-weight: bolder; background-color: black; border-radius: 5px; border: 1px solid darkgray; box-shadow: 5px 5px 10px gray; } #special{ width: 585px; height: 50px; margin-top: 5px; text-shadow: 2 2px 2 lightgray; color: white; font-size: 25px; font-weight: bolder; background-color: black; border-radius: 5px; border: 1px solid darkgray; box-shadow: 5px 5px 10px gray; } ::-webkit-input-placeholder { text-align: center; } :-moz-placeholder { /* Firefox 18- */ text-align: center; } ::-moz-placeholder { /* Firefox 19+ */ text-align: center; } :-ms-input-placeholder { text-align: center; }
const KEYS = [ {l: 'ض'}, {l: 'ص'}, {l: 'ق'}, {l: 'ف'}, {l: 'غ'}, {l: 'ع'}, {l: 'ه'}, {l: 'خ'}, {l: 'ح'}, {l: 'ج'}, {l: 'ش'}, {l: 'س'}, {l: 'ي'}, {l: 'ب'}, {l: 'ل'}, {l: 'ا'}, {l: 'ت'}, {l: 'ن'}, {l: 'م'}, {l: 'ك'}, {l: 'ظ'}, {l: 'ط'}, {l: 'ذ'}, {l: 'د'}, {l: 'ز'}, {l: 'ر'}, {l: 'و'}, {l: 'ة'}, {l: 'ث'}, {l: 'ى'}, {l: 'Clear'},{l: '!'},{l: '.'},{l: 'ئ'}, {l: 'ء'}, {l: 'ؤ'}, {l: 'لا'}, {l: '،'},{l: '؟'},{l: 'Delete'} ] const NUMERALS = [ {l: '١'}, {l: '٢'}, {l: '٣'}, {l: '٤'}, {l: '٥'}, {l: '٦'}, {l: '٧'}, {l: '٨'}, {l: '٩'}, {l: '٠'} ] const SPECIAL_KEYS = [ {k: 'Space'} ] var store = { state: { words: [] }, clearScreen: function(){ return this.state.words.splice(0) }, backspace: function(){ var position = this.state.words.length return this.state.words.splice(position - 1, 1) } } Vue.component('Screen', { template: '#screen', data: function() { return { words: store.state.words, } }, computed: { letters: function(){ return this.words.map(function(word){ return word }).join('') } } }) Vue.component('Keyboard', { props: ['numerals', 'keys', 'special', 'remaining'], template: '#keyboard', data: function(){ return { words: store.state.words, } }, methods:{ addLetter: function(letter){ if(letter==='Clear'){ store.clearScreen() }else if(letter==="Delete"){ store.backspace() }else if(letter==='Space'){ this.words.push(' ') } else{ this.words.push(letter) } } } }) vm = new Vue({ el: "#app", data: { numerals: NUMERALS, keys: KEYS, special: SPECIAL_KEYS, } })

Related: See More


Questions / Comments:

if you want to make your keyboard more attractive you need to add more feature into it.

i am suggesting you a tool you should add that tool https://spacebarcounter.info/

alon70 () - 2 years ago - Reply 0


increase your speed on keyboard. with a simple tool it can can you typing and many other things .

speedup your space bar speed double click speed and mouse click speed.it will helps you alot.

https://spacebarcounter.info/spacebar-counter-per-5-seconds/

alon70 () - 3 years ago - Reply 0


increase your speed on keyboard. with a simple tool it can can you typing and many other things .

speedup your space bar speed double click speed and mouse click speed.it will helps you alot.

https://spacebarcounter.info/spacebar-counter-per-5-seconds/

alon70 () - 3 years ago - Reply 0


increase your speed on keyboard. with a simple tool it can can you typing and many other things .

speedup your space bar speed double click speed and mouse click speed.it will helps you alot.

https://spacebarcounter.info/spacebar-counter-per-5-seconds/

alon70 () - 3 years ago - Reply 0