{"id":7015,"date":"2018-11-15T11:27:34","date_gmt":"2018-11-15T11:27:34","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7015"},"modified":"2018-11-15T11:40:13","modified_gmt":"2018-11-15T11:40:13","slug":"teclado-virtual-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/","title":{"rendered":"Teclado virtual con jQuery"},"content":{"rendered":"

En este art\u00edculo vamos a ver como crear un teclado virtual<\/strong> sencillo utilizando principalmente el evento click<\/em>\u00a0disponible en la librer\u00eda jQuery <\/strong>para capturar los clicks del rat\u00f3n en las teclas del teclado. Tambi\u00e9n utilizamos un poco de HTML<\/strong> y CSS<\/strong> para el aspecto visual del teclado.<\/p>\n

En el ejemplo en funcionamiento aparece una pizarra representada mediante un textarea<\/em> que no es m\u00e1s que el lugar donde se ven reflejadas las letras y n\u00fameros que se pulsan en el teclado virtual<\/strong>.<\/p>\n

En la siguiente imagen lo puedes ver gr\u00e1ficamente:<\/p>\n

\"\"<\/a><\/p>\n

\u00bfC\u00f3mo puedes incorporar este teclado virtual en tu p\u00e1gina Web?<\/p>\n

Bien f\u00e1cil. Empezaremos por a\u00f1adir la librer\u00eda jQuery y la captura del evento click del rat\u00f3n de cada tecla del teclado en la cabecera o dentro de la etiqueta <head> de tu p\u00e1gina Web:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script src=<\/span>"https:\/\/code.jquery.com\/jquery-3.2.1.js"<\/span>><\/<\/span>script><\/span>\n<<\/span>script><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n    $(<\/span>"#virtual-keyboard a"<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        if<\/span> (<\/span>$(<\/span>this<\/span>)<\/span>.attr<\/span>(<\/span>'data'<\/span>)<\/span> ==<\/span> 'DEL'<\/span>)<\/span> {<\/span>\n            board_text =<\/span> $(<\/span>'textarea.board'<\/span>)<\/span>.text<\/span>(<\/span>)<\/span>;<\/span>\n            board_text =<\/span> board_text.substring<\/span>(<\/span>0,<\/span> board_text.length<\/span>-<\/span>1)<\/span>;<\/span>\n            $(<\/span>'textarea.board'<\/span>)<\/span>.text<\/span>(<\/span>board_text)<\/span>;<\/span>\n        }<\/span> else<\/span> {<\/span>\n            $(<\/span>'textarea.board'<\/span>)<\/span>.text<\/span>(<\/span>$(<\/span>'textarea.board'<\/span>)<\/span>.text<\/span>(<\/span>)<\/span> +<\/span> $(<\/span>this<\/span>)<\/span>.attr<\/span>(<\/span>'data'<\/span>)<\/span>)<\/span>;<\/span>\n        }<\/span>\n    }<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
Esta porci\u00f3n de c\u00f3digo agrega la librer\u00eda jQuery<\/strong> en tu p\u00e1gina y est\u00e1 esperando a que alguna tecla de nuestro teclado sea pulsada mediante el click del rat\u00f3n para agregar su valor en la pizarra.<\/p>\n
Dentro del cuerpo de la p\u00e1gina o dentro de la etiqueta <body> tenemos nuestra pizarra representada mediante un textarea<\/em> vac\u00edo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<textarea<\/span><\/a> class<\/span>=<\/span>"board"<\/span>><\/<\/span>textarea<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Y nuestro teclado a continuaci\u00f3n:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> id<\/span>=<\/span>"virtual-keyboard"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"keyboard-row"<\/span>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"1"<\/span>><\/span>1<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"2"<\/span>><\/span>2<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"3"<\/span>><\/span>3<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"4"<\/span>><\/span>4<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"5"<\/span>><\/span>5<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"6"<\/span>><\/span>6<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"7"<\/span>><\/span>7<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"8"<\/span>><\/span>8<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"9"<\/span>><\/span>9<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> class<\/span>=<\/span>"number"<\/span> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"0"<\/span>><\/span>0<\/<\/span>a<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"keyboard-row"<\/span>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"Q"<\/span>><\/span>Q<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"W"<\/span>><\/span>W<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"E"<\/span>><\/span>E<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"R"<\/span>><\/span>R<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"T"<\/span>><\/span>T<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"Y"<\/span>><\/span>Y<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"U"<\/span>><\/span>U<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"I"<\/span>><\/span>I<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"O"<\/span>><\/span>O<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"P"<\/span>><\/span>P<\/<\/span>a<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"keyboard-row"<\/span>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"A"<\/span>><\/span>A<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"S"<\/span>><\/span>S<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"D"<\/span>><\/span>D<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"F"<\/span>><\/span>F<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"G"<\/span>><\/span>G<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"H"<\/span>><\/span>H<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"J"<\/span>><\/span>J<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"K"<\/span>><\/span>K<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"L"<\/span>><\/span>L<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"\u00d1"<\/span>><\/span>\u00d1<\/<\/span>a<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"keyboard-row"<\/span>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"Z"<\/span>><\/span>Z<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"X"<\/span>><\/span>X<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"C"<\/span>><\/span>C<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"V"<\/span>><\/span>V<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"B"<\/span>><\/span>B<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"N"<\/span>><\/span>N<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"M"<\/span>><\/span>M<\/<\/span>a<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"keyboard-row"<\/span>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>" "<\/span>><\/span>ESPACIO<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data<\/span>=<\/span>"DEL"<\/span>><\/span>ELIMINAR<\/<\/span>a<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Donde cada tecla es un enlace sin destino pero con un atributo data<\/em> que contiene el valor de la tecla. El valor del data<\/em> es lo que anotamos en la pizarra tras hacer click en una tecla.<\/p>\n
Para cada tecla lo que hacemos es a\u00f1adir su valor en la pizarra. Tenemos una tecla especial que es la de \u00abEliminar\u00bb que lo que haces es remover el \u00faltimo car\u00e1cter pulsado.<\/p>\n
Tanto el teclado como la pizarra son totalmente personalizables a trav\u00e9s de la hoja de estilos CSS.<\/p>\n
\u00bfTe gustar\u00eda ayudarnos completando este teclado virtual? Env\u00edanos tu c\u00f3digo que permite agregar mas teclas mediante un comentario.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Tutorial y c\u00f3digo de ejemplo que te permite agregar un teclado virtual a tu p\u00e1gina Web que funciona con jQuery para capturar las teclas pulsadas mediante el click del rat\u00f3n.<\/p>\n","protected":false},"author":1,"featured_media":7016,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[84],"class_list":["post-7015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-formularios"],"yoast_head":"\nTeclado virtual con jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar un teclado virtual a tu p\u00e1gina Web que funciona con jQuery para capturar las teclas pulsadas mediante el click del rat\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Teclado virtual con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar un teclado virtual a tu p\u00e1gina Web que funciona con jQuery para capturar las teclas pulsadas mediante el click del rat\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-15T11:27:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-15T11:40:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/11\/virtual-keyboard.png\" \/>\n\t<meta property=\"og:image:width\" content=\"507\" \/>\n\t<meta property=\"og:image:height\" content=\"419\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/\",\"name\":\"Teclado virtual con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/11\/virtual-keyboard.png\",\"datePublished\":\"2018-11-15T11:27:34+00:00\",\"dateModified\":\"2018-11-15T11:40:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo que te permite agregar un teclado virtual a tu p\u00e1gina Web que funciona con jQuery para capturar las teclas pulsadas mediante el click del rat\u00f3n.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/11\/virtual-keyboard.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/11\/virtual-keyboard.png\",\"width\":507,\"height\":419},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Teclado virtual con jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Teclado virtual con jQuery - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar un teclado virtual a tu p\u00e1gina Web que funciona con jQuery para capturar las teclas pulsadas mediante el click del rat\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Teclado virtual con jQuery - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar un teclado virtual a tu p\u00e1gina Web que funciona con jQuery para capturar las teclas pulsadas mediante el click del rat\u00f3n.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2018-11-15T11:27:34+00:00","article_modified_time":"2018-11-15T11:40:13+00:00","og_image":[{"width":507,"height":419,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/11\/virtual-keyboard.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/","name":"Teclado virtual con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/11\/virtual-keyboard.png","datePublished":"2018-11-15T11:27:34+00:00","dateModified":"2018-11-15T11:40:13+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar un teclado virtual a tu p\u00e1gina Web que funciona con jQuery para capturar las teclas pulsadas mediante el click del rat\u00f3n.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/11\/virtual-keyboard.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/11\/virtual-keyboard.png","width":507,"height":419},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/teclado-virtual-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Teclado virtual con jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7015"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7015\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7016"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}