I liked this video a lot. I think your tutorials are extremely helpful for people teaching themselves javascript. I was able to take what I learned from this tutorial and add a database to make a cash register app. Great job.
Nice❤. However it only adds text to the end of string. Any workaround to capture exact element's caret position while editing. For example if I try to add text inside the string, the text will be added to the end of string.
Do you know why QuerySelectorAll() is only working in the first web site? i try other website in the same project or katalog but works only on 1 site even i import the link and script correctly.
Thanks a lot for this tutorial. It is a difficult project, which allows us to practice well and be more experienced in JavaScript. Fortunately there is the source code and that I was able to copy and paste, because I risked getting lost.
@@dcode-software you did it already bro if you can please can you upload other project like this that uses object class and function and other javascript in very simple way
how can i add font to the keyboard since we want to create virtual keyboard that can change the font? btw thanks for sharing the tutorial its really help us to create screen keyboard
Well why do the keys shift in upper rows? Qwe are shifted in 1-0 number line in my case, why arent these seperated in different rows? Edit: i found the method, in the js there is a insert line break function, I am thankful for your code and project, thanks again
Perfect virtual keyboard. But is there any possibility to add a SHIFT button and when the shift button is clicked the numbers buttons changes to respective special characters
@@dcode-software I tried by creating a new function like this. _replaceButtons( keyLayout ) { const replaceNumbers = [ '~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+' ]; const replaceKeys = ['{', '}', '|', ':', '"', '', '?']; keyLayout[ 0 ] = replaceNumbers[0]; // result }, // Additional case case 'shift': keyElement.textContent = 'Shift'; keyElement.addEventListener( 'click', () => { this._replaceButtons( keyLayout ); } ); break; But I'm unable to update the array with its result. Any idea of how to update the result to the array keys?
I got lost at the eventHandlers part. He is saying that this project combines his previous content. What did he mean by that? Perhaps I can check it out and later I will be able to understand this one.
nice project completed it successfully thanks to your explanation they were very clear. so is it possible to add an emoji on this keyboard if we want please make a video on that
Great bit of code, thanks for the share. Quick question, you have added events for oninput and onclose. But how to get the HTML/Javascript to interact with these events. Bashing me head on this a bit.
If I insert text from the physical keyboard, then use this virtual keyboard to insert some characters, the old text will be deleted. How do I prevent the old text from being deleted?
Do you have any idea how can I link the virtual keyboard with the real one so when i press on the laptop’s keyboard presses the virtual keyboard also. ☺️
@@dcode-software your tutorials are amazing as always. thanks for all of these. I have a webApp project in which i am applying this virtual keyboard but in a different way...its a game. you explain everything so well.....your tutorial made my work more easy. Thanks again
hello. What is the theme that you used in VS Code. Looks like your theme isnt one of thise default dark theme. Did you installed this theme from VSCode marketplace?
Amazing tutorial, but sir when i use my main keyboard and write something and after i use this virtual keyboard .. then we found some bugs, both virtual and main keyboard not type properly. Problems i have found - backspace key from main or virtual key Also when type something from main keyboard and delete that and then typing through virtual keyboard , it misbehave.
Many thanks for sharing. I'm not a programmer but I made it working fine in 10 mn! Very helpful. ... but now I want to use it offline on an iPad; how can I get rid of Google icons font? Is replacing with .png icons possible?
@@natureislove9069 i copied it and run in a new chrome's tab and the keyboard works but it isn't like he showed (green and white) but grey and white, the keys' layout is not like he had... I don't know if it affect your prg, i'm not an expert in programming but the code looks simple and straight forward. So why you don't make a backup copy of your prg and try it out if you want to verify if it affects your code?
Thank you for the tutorial. I'm using this in Flight Simulator but the font set is not working. However, the font awesome icons are working. The code for that is How do I incorporate the ${icon_name} into that inside the javascript when generating the keys?
simply mind blowing!!! great tutorial. how do you plan these kinda programs? what kind of methods to add and how they would work and all these stuff.. can you give some tips to how to plan these things before coding? Thanks
No worries! Yeah look I just turn things into a method when they involve changing the state of an object (example: _toggleCapsLock), perform an action (example: open or close) or when it's quite complicated and is more than 50 lines of code (example: _createKeys)
Thanks for the amazing video, it helped me to deploy french keyboard in my website. But there is a bug in the code. When we use virtual keyboard to write and then we write from main keyboard both input are connected and now if we clear all this and again give input from virtual keyboard the letters written first from virtual keyboard is also added Please look at these problem and try to fix it and help me, I will be thankful to you.
Thank you for your presentation. I tried to repeat everything what you have done in Dreamweaver, but code was not working. Then, I copied your code, but the result was similar with the following errors: 1. _triggerEvent(handlerName) { if (typeof this.eventHandlers[handlerName] == "function") { this.eventHandlers[handlerName](this.properties.value); } }, asking to insert === instead of == 2. close() { this.properties.value = ""; this.eventHandlers.oninput = oninput; this.eventHandlers.onclose = onclose; this.elements.main.classList.add("keyboard--hidden"); } }; it says that oninput and onclose are not defined. 3. And also, it forces me to add the following at the beginning: /*jshint esversion: 6 */ /*jslint node: true */ "use strict"; If anybody was able to use it and to have this beautiful keyboard, just explain, how you solved all these?
Thanks for this great work! I would like to start with 1 uppercase letter. Then the letters should switch to lowercase automatically. After a space they should switch to uppercase again. How do I have to edit the code for this functionality?
@@dcode-software I tried a long time to add the features - that´s the reason why I was asking how to get it working. There are still some coding rookies on this planet ;)
Amazing video. Thank you so much for sharing your expertise. I feel as a true amateur... A lot to learn! Is there a simple way to not make it work on phones, just on computers?
Has anyone created a keyboard that works on mobile devices as this doesn't? Problem I have experienced is there is no consistency between devices, some keyboards can wipe out most of the screen, while others obscure the input field and as such the user experience is unpredictable.
extremely well done, i LOVE how its also easy to create custom number pads and style everything so well :) im too tight to patreon but if u have a paypal link in ur description im happy to donate a beer
@@dcode-software Are both css and JavaScript needed? Or is either one okay and you’re just showing us how to use each one? I’m doing a school project and I’m making a virtual, multi lingual keyboard (just English and Japanese for now). I am hoping to learn how to switch the language on the board.
@@dcode-software very very good..i started before 2 months to learn js and that is simply perfect for me ....everything clean and understandable ..thnx
![[안방1열 풀캠4K] 베이비몬스터 'DRIP' (BABYMONSTER FullCam)│@SBS Inkigayo 241110](http://i.ytimg.com/vi/AQ4RIghEvUs/mqdefault.jpg)
![Налог на незнание JavaScript - [Hamster Kombat]](/img/n.gif)
Very organized mind and presentation. Perfect teaching for this.
Давай пили таску, до дедлайна чуть-чуть осталось, еще и тест скоро...Смотрит он тут комментарии
ору :D
привет товарищи
😂
ахах
точняк! спасибо что про тест напомнил!
This is just what I was looking for. Very detailed and thoroughly explained. Nice work!
I made it! thank you man!!! god bless you!!
I liked this video a lot. I think your tutorials are extremely helpful for people teaching themselves javascript. I was able to take what I learned from this tutorial and add a database to make a cash register app. Great job.
Very clear and sharp, in coding, explaining and JS knowledge. Bravo, sir and many thanks ! Will do it in "azerty" mode, since I'm French.
Hahaha thanks mate, good luck :)
@@dcode-software Did it + added the "@" key. Thx again !
JS makes me want to cry with frustration. There's just so much to think about
i can feel ur pain
jave you fin tried jva or c
@@mitemazgaliev5286 nope, not yet
@@alexalex831 you ll be surprised how much theres to think there but dont think of it as a scary obstacle but as a challenge cheers
All beninging is difficult
Awesome!. I hope watch such videos more !
Nice❤. However it only adds text to the end of string. Any workaround to capture exact element's caret position while editing. For example if I try to add text inside the string, the text will be added to the end of string.
how to insert keyboard for my block? (ex. in center screen and always not hidden?)
You saved my day
Well done 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
Awesome tutorial!
Do you know why QuerySelectorAll() is only working in the first web site? i try other website in the same project or katalog but works only on 1 site even i import the link and script correctly.
I really need it and need your help. If I want that when the page loads, the keyboard also pops up. How can I do this
in mobail and tablet how to stop show default keyboard bcz when i tap in textrea then show two keyboard on is our and second is default
Thanks a lot for this tutorial.
It is a difficult project, which allows us to practice well and be more experienced in JavaScript.
Fortunately there is the source code and that I was able to copy and paste, because I risked getting lost.
Thanks alot man! was really helpful :)
22:09 js starts
you are awesome bro keep it up you are changed my mind set about javascript object thank you
No worries, that's awesome to hear 🙂
@@dcode-software you did it already bro if you can please can you upload other project like this that uses object class and function and other javascript in very simple way
how can i add font to the keyboard since we want to create virtual keyboard that can change the font? btw thanks for sharing the tutorial its really help us to create screen keyboard
Well done
Well why do the keys shift in upper rows? Qwe are shifted in 1-0 number line in my case, why arent these seperated in different rows?
Edit: i found the method, in the js there is a insert line break function, I am thankful for your code and project, thanks again
How do i trigger this keyboard on my webpage?
Thank you! 🤩
Hats off man explaining every functionality with such good explanation✍
Nice video! 👍👍👍
Perfect virtual keyboard. But is there any possibility to add a SHIFT button and when the shift button is clicked the numbers buttons changes to respective special characters
That would be cool! If you end up implementing this feature, feel free to make a pull request on the GitHub repository for this.
@@dcode-software I tried by creating a new function like this.
_replaceButtons( keyLayout ) {
const replaceNumbers = [
'~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+'
];
const replaceKeys = ['{', '}', '|', ':', '"', '', '?'];
keyLayout[ 0 ] = replaceNumbers[0]; // result
},
// Additional case
case 'shift':
keyElement.textContent = 'Shift';
keyElement.addEventListener( 'click', () => {
this._replaceButtons( keyLayout );
} );
break;
But I'm unable to update the array with its result. Any idea of how to update the result to the array keys?
Great lesson!
I got lost at the eventHandlers part. He is saying that this project combines his previous content. What did he mean by that? Perhaps I can check it out and later I will be able to understand this one.
awesome very help full thanks for sharing code
Very well delivered and orgnised tutorial. 10/10. Thanks
Salvou meu dia, vlw msm e parabéns pelo trabalho, ficou incrivel
Amazing tutorial .
How to add eventListeners to virtual Keyboard like a real Keyboard? I need something like keyUp and keyPress.
You could try something like the 'mousedown' and 'mouseup' events
nice project completed it successfully thanks to your explanation they were very clear. so is it possible to add an emoji on this keyboard if we want please make a video on that
Awesome tutorial, thanks
Glad it was helpful!
Great tutorial. I love that I have a virtual keyboard I can have as a backup! Thank you!
Great bit of code, thanks for the share. Quick question, you have added events for oninput and onclose. But how to get the HTML/Javascript to interact with these events. Bashing me head on this a bit.
@@daliborPavlik in the end i did the same, plus added a couple of custom buttons to suit my needs
Pls provide tab key functionality and body scroll on keyboard popup
Thanks amazing for the tutorial...
Hey how can i auto-hide this keyboard when input area is not focused?
Everytime when i click keyword i want to rearrange keyword position. How can I achieve that. Thanks for video.
Thank u for this awesome video
Absolutely no worries at all mate
Darw virtual keyboard Tamil
how to add limit in text input?
If I insert text from the physical keyboard, then use this virtual keyboard to insert some characters, the old text will be deleted. How do I prevent the old text from being deleted?
Very usefull. Thank you.
No worries!!
Do you have any idea how can I link the virtual keyboard with the real one so when i press on the laptop’s keyboard presses the virtual keyboard also. ☺️
hello. what is the font that u used in the VS Code editor?
I use Roboto Mono
@@dcode-software your tutorials are amazing as always. thanks for all of these.
I have a webApp project in which i am applying this virtual keyboard but in a different way...its a game. you explain everything so well.....your tutorial made my work more easy. Thanks again
I'm so glad to hear that!
Cool tutorial! Thank you very much!
One question: why was "click" used and not "keydown"?
you're probably from rs school?)
@@itsmefakhriddin207 yes)
Juda ham zo'r qoyil. Siz bu darajaga yetishizga necha yi ketgan?
Thanks for this wonderful tutorial.
No worries mate!! 😁
really easy to understand. thank you for the tutorial :D
No worries mate!
Big thanks!
hello. What is the theme that you used in VS Code. Looks like your theme isnt one of thise default dark theme. Did you installed this theme from VSCode marketplace?
Yes this theme is called Min Dark
VS Code theme, icon pack and font used? Thanks!
Hey, it's called "dcode" - you can find it on the marketplace. The font used is Roboto Mono.
great for custom emoji or special chars keyboard
thanks man
Amazing tutorial, but sir when i use my main keyboard and write something and after i use this virtual keyboard .. then we found some bugs, both virtual and main keyboard not type properly.
Problems i have found - backspace key from main or virtual key
Also when type something from main keyboard and delete that and then typing through virtual keyboard , it misbehave.
I am also facing the same issue
How can I make a one-time monetary contribution?
Many thanks for sharing. I'm not a programmer but I made it working fine in 10 mn! Very helpful.
... but now I want to use it offline on an iPad; how can I get rid of Google icons font? Is replacing with .png icons possible?
can we have a look on assets/favicon.ico and assets/dcode.css?
yess
@@natureislove9069 where?
@@caru_marco_ bro even i want that, "yes" here means that yes please can you help us out with this?
@@caru_marco_i wanted to ask if i exclude these from my code ,will it affect my code?
@@natureislove9069 i copied it and run in a new chrome's tab and the keyboard works but it isn't like he showed (green and white) but grey and white, the keys' layout is not like he had...
I don't know if it affect your prg, i'm not an expert in programming but the code looks simple and straight forward. So why you don't make a backup copy of your prg and try it out if you want to verify if it affects your code?
Thank you for the tutorial.
I'm using this in Flight Simulator but the font set is not working.
However, the font awesome icons are working.
The code for that is
How do I incorporate the ${icon_name} into that inside the javascript when generating the keys?
It can be a good idea for an electron app
Yeah definitely! Didn't think of that, especially for embedded apps!
Awesome!
For sure mate 😁😁
Thanks so much!
Love the tutorial but it doesnt seem to work on IE. how can i do that?
RS School, хорош списывать!
what writer should i use to do this?
simply mind blowing!!! great tutorial. how do you plan these kinda programs? what kind of methods to add and how they would work and all these stuff.. can you give some tips to how to plan these things before coding? Thanks
No worries! Yeah look I just turn things into a method when they involve changing the state of an object (example: _toggleCapsLock), perform an action (example: open or close) or when it's quite complicated and is more than 50 lines of code (example: _createKeys)
@@dcode-software love you man.. im learning soo much from you. thanks a lot
No problem man any time :)
Thanks for the tutorial! But it's harder for beginners
Thanks for the amazing video, it helped me to deploy french keyboard in my website. But there is a bug in the code. When we use virtual keyboard to write and then we write from main keyboard both input are connected and now if we clear all this and again give input from virtual keyboard the letters written first from virtual keyboard is also added
Please look at these problem and try to fix it and help me, I will be thankful to you.
I really need it and need your help. If I want that when the page loads, the keyboard also pops up. How can I do this
Please tell how to add custom keys.
very nice
Happy to hear your liked it!
Nice!
Definitely mate :)
Thank you for your presentation. I tried to repeat everything what you have done in Dreamweaver, but code was not working. Then, I copied your code, but the result was similar with the following errors:
1. _triggerEvent(handlerName) {
if (typeof this.eventHandlers[handlerName] == "function") {
this.eventHandlers[handlerName](this.properties.value);
}
},
asking to insert === instead of ==
2. close() {
this.properties.value = "";
this.eventHandlers.oninput = oninput;
this.eventHandlers.onclose = onclose;
this.elements.main.classList.add("keyboard--hidden");
}
};
it says that oninput and onclose are not defined.
3. And also, it forces me to add the following at the beginning:
/*jshint esversion: 6 */
/*jslint node: true */
"use strict";
If anybody was able to use it and to have this beautiful keyboard, just explain, how you solved all these?
Can you put left and right arrow keys?
I think that'd definitely be possible
Impressive
What is the name of this theme that you use in vscode?
Min Dark
What is it theme ?
Perfect !!!
Thanks for this great work! I would like to start with 1 uppercase letter. Then the letters should switch to lowercase automatically. After a space they should switch to uppercase again. How do I have to edit the code for this functionality?
I might upload this code to GitHub and then you can fork it and add that feature :)
@@dcode-software I tried a long time to add the features - that´s the reason why I was asking how to get it working. There are still some coding rookies on this planet ;)
Excellent!! Thank you so much for giving us this type of
Javascript Tutorial. I have learned so many things from this video. 5*******
Awesome
keys are not working
Thank you m'LORD
Amazing video. Thank you so much for sharing your expertise. I feel as a true amateur... A lot to learn!
Is there a simple way to not make it work on phones, just on computers?
use an if statement with the viewport width. If it's greater than say 900px, && maxTouchPoints
lol, 2 years ago... I hope you found your answer way before now!
Has anyone created a keyboard that works on mobile devices as this doesn't? Problem I have experienced is there is no consistency between devices, some keyboards can wipe out most of the screen, while others obscure the input field and as such the user experience is unpredictable.
thanks for this wonderful tutorial.i want to ask you how we can use it for input fields because mine is not working with input field.
I wish I could be pro that much too..
Thank you so much,is there a way i can enable virtual keyboard on my webview in javafx?
I'm not entirely sure, I assume it supports HTML, CSS and JavaScript, if it does then you should be good to go
Hi, you have my subscription :-)
Oh mate thank you, welcome to dcode
Can i use it as a personal virtual keyboard in my computer?....any response would be a great help
Sorry I'm unsure if you're able to - I suggest you look at Electron, maybe it would work?
extremely well done, i LOVE how its also easy to create custom number pads and style everything so well :) im too tight to patreon but if u have a paypal link in ur description im happy to donate a beer
I appreciate that, thanks 🙂 I haven't got a PayPal link yet but I may consider making one
@@dcode-software Are both css and JavaScript needed? Or is either one okay and you’re just showing us how to use each one? I’m doing a school project and I’m making a virtual, multi lingual keyboard (just English and Japanese for now). I am hoping to learn how to switch the language on the board.
Very nice vid sir, makeme vibrato from ny haert
thank you brother
hmm, time to add the functionality of deleting all highlighted text with 1 backspace key click...
1. Anybody have an idea on how to account for keycodes? 2.What about onkeyup,onkeypress,onkeydown events? Thanks for the tutory, really helpful!
27:45
wow...!!!!!!!!!!!!!!!!
Good or bad?
@@dcode-software very very good..i started before 2 months to learn js and that is simply perfect for me ....everything clean and understandable ..thnx
Great to hear!
FAITES LA TRADUCTION EN FRANCAIS ON VOUS COMPRENDS MIEUX MERCI
return '${iconName}';
Error this line always.