{"id":6701,"date":"2015-12-11T11:34:22","date_gmt":"2015-12-11T11:34:22","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6701"},"modified":"2019-03-05T17:24:13","modified_gmt":"2019-03-05T17:24:13","slug":"ja-numeric-captcha-con-php-y-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/","title":{"rendered":"JA Numeric Captcha con PHP y jQuery"},"content":{"rendered":"<p>Harto de probar plugins para captchas sin conseguir el resultado deseado, finalmente me he aventurado a crear un captcha propio personalizado utilizando PHP y jQuery.<\/p>\n<p>En este caso, este captcha genera un n\u00famero aleatorio de 4 cifras que se muestra en el formulario para que sea tecleado con el objetivo de habilitar el bot\u00f3n de \u00abEnviar\u00bb el formulario.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-large.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6703\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-large.png\" alt=\"jcaptcha-large\" width=\"1157\" height=\"171\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-large.png 1157w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-large-300x44.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-large-1024x151.png 1024w\" sizes=\"auto, (max-width: 1157px) 100vw, 1157px\" \/><\/a><\/p>\n<p>Para generar un n\u00famero aleatorio de 4 cifras lo haremos con PHP de la forma siguiente:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"php\" style=\"font-family:monospace;\"><span class=\"kw2\">&lt;?php<\/span>\n<a href=\"http:\/\/www.php.net\/srand\"><span class=\"kw3\">srand<\/span><\/a><span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.php.net\/time\"><span class=\"kw3\">time<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"re0\">$captcha_value<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#40;<\/span>string<span class=\"br0\">&#41;<\/span><a href=\"http:\/\/www.php.net\/rand\"><span class=\"kw3\">rand<\/span><\/a><span class=\"br0\">&#40;<\/span>1000<span class=\"sy0\">,<\/span>9999<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"re0\">$captcha_numbers<\/span> <span class=\"sy0\">=<\/span> <a href=\"http:\/\/www.php.net\/array\"><span class=\"kw3\">array<\/span><\/a><span class=\"br0\">&#40;<\/span>0<span class=\"sy0\">,<\/span>1<span class=\"sy0\">,<\/span>2<span class=\"sy0\">,<\/span>3<span class=\"sy0\">,<\/span>4<span class=\"sy0\">,<\/span>5<span class=\"sy0\">,<\/span>6<span class=\"sy0\">,<\/span>7<span class=\"sy0\">,<\/span>8<span class=\"sy0\">,<\/span>9<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"sy1\">?&gt;<\/span><\/pre><\/div><\/div>\n<p>Adem\u00e1s de generar el n\u00famero aleatorio, estamos declarando un array con todos los n\u00fameros que recorreremos en el formulario para generar nuestro teclado virtual.<\/p>\n<p>Dentro del formulario a\u00f1adiremos el c\u00f3digo de nuestro captcha:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;form-group current_captcha&quot;<\/span>&gt;<\/span>\n\u00a0\u00a0\u00a0 <span class=\"sc2\">&lt;?php echo $captcha_value; ?&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a>&gt;<\/span>\n&nbsp;\n<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text form-group&quot;<\/span>&gt;<\/span>\n\u00a0\u00a0\u00a0 <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/label.html\"><span class=\"kw2\">label<\/span><\/a> <span class=\"kw3\">for<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;captcha&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;captha_numbers&quot;<\/span>&gt;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <span class=\"sc2\">&lt;?php foreach <span class=\"br0\">&#40;<\/span>$captcha_numbers as $number<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><\/span>\n<span class=\"sc2\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo <span class=\"st0\">'&lt;a href=&quot;#&quot; data=&quot;'<\/span>.$number.<span class=\"st0\">'&quot;&gt;<\/span><\/span>'.$number.'<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;<\/span> ';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?&gt;\n\u00a0\u00a0\u00a0 <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/label.html\"><span class=\"kw2\">label<\/span><\/a>&gt;<\/span>\n\u00a0\u00a0\u00a0 <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/input.html\"><span class=\"kw2\">input<\/span><\/a> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text&quot;<\/span> <span class=\"kw3\">size<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;4&quot;<\/span> <span class=\"kw3\">maxlength<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;4&quot;<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;captcha&quot;<\/span> <span class=\"kw3\">name<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;captcha&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;form-control&quot;<\/span> <span class=\"kw3\">disabled<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;disabled&quot;<\/span>&gt;<\/span>\n\u00a0\u00a0\u00a0 <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/input.html\"><span class=\"kw2\">input<\/span><\/a> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;hidden&quot;<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;current_captcha&quot;<\/span> <span class=\"kw3\">name<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;current_captcha&quot;<\/span> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;&lt;?php echo $captcha_value; ?&gt;<\/span><\/span>&quot;&gt;\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Inicialmente mostramos el c\u00f3digo captcha generado aleatoriamente y seguidamente mostramos nuestro panel virtual para seleccionar los n\u00fameros. Tenemos un campo desactivado donde se va guardando los n\u00fameros que se van pulsando y otro campo oculto donde queda registrado el c\u00f3digo actual del captcha.<\/p>\n<p>El formulario deber\u00e1 tener un bot\u00f3n parecido a este:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/input.html\"><span class=\"kw2\">input<\/span><\/a> <span class=\"kw3\">onclick<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;$(this).hide();&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-default button button-medium&quot;<\/span> <span class=\"kw3\">name<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;submitContact&quot;<\/span> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;Enviar&quot;<\/span> <span class=\"kw3\">type<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;submit&quot;<\/span>&gt;<\/span><\/pre><\/div><\/div>\n<p>La parte m\u00e1s interesante del asunto la hacemos con jQuery de la siguiente forma:<\/p>\n<div id=\"wpshdo_4\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_4\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_4\"><\/a><a id=\"wpshat_4\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_4\"  onClick=\"javascript:wpsh_toggleBlock(4)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_code(4)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_print(4)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_4\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span class=\"sy0\">&lt;<\/span>script<span class=\"sy0\">&gt;<\/span>\n$<span class=\"br0\">&#40;<\/span>document<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">ready<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span>\n    $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.button'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">attr<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;disabled&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.captha_numbers a'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'click'<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span>\n        <span class=\"kw2\">var<\/span> data <span class=\"sy0\">=<\/span> $<span class=\"br0\">&#40;<\/span><span class=\"kw1\">this<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">attr<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'data'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#captcha'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">val<\/span><span class=\"br0\">&#40;<\/span>$<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#captcha'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">val<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">+<\/span> data<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n        <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>$<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#captcha'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">val<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">==<\/span> $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#current_captcha'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">val<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.button'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">attr<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;disabled&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw2\">false<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n        <span class=\"kw1\">return<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><\/pre><\/div><\/div>\n<p>Lo primero que hacemos es desactivar el bot\u00f3n de nuestro formulario. Despu\u00e9s capturamos el evento \u00abclick\u00bb de cada n\u00famero para registrarlo en el campo que tenemos desactivado. Hacemos una comparaci\u00f3n del contenido del campo desactivado (lo que se est\u00e1 escribiendo) con el campo oculto (n\u00famero aleatorio) para habilitar o no el bot\u00f3n.<\/p>\n<p>Para hacerlo funcionar es importante incluir la librer\u00eda jQuery.<\/p>\n<p>La demostraci\u00f3n esta basada en Bootstrap a\u00f1adiendo un poco de estilo:<\/p>\n<div id=\"wpshdo_5\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_5\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_5\"><\/a><a id=\"wpshat_5\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_5\"  onClick=\"javascript:wpsh_toggleBlock(5)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_code(5)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_print(5)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_5\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"css\" style=\"font-family:monospace;\"><span class=\"re1\">.current_captcha<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">font-size<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">22px<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">font-style<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">italic<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">color<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">red<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n&nbsp;\n<span class=\"re1\">.captha_numbers<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">margin-bottom<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">10px<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n&nbsp;\n<span class=\"re1\">.captha_numbers<\/span> a <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">border<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">1px<\/span> <span class=\"kw2\">solid<\/span> <span class=\"re0\">#0085CF<\/span><span class=\"sy0\">;<\/span>\n    -webkit-border-radius<span class=\"sy0\">:<\/span> <span class=\"re3\">6px<\/span><span class=\"sy0\">;<\/span>\n    -moz-border-radius<span class=\"sy0\">:<\/span> <span class=\"re3\">6px<\/span><span class=\"sy0\">;<\/span>\n    border-radius<span class=\"sy0\">:<\/span> <span class=\"re3\">6px<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">color<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#0085CF<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">padding<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">4px<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">text-decoration<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">none<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n&nbsp;\n<span class=\"re1\">.captha_numbers<\/span> a<span class=\"re2\">:hover <\/span><span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">background-color<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#0085CF<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">color<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#ffffff<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>He optado por publicarlo porque me ha parecido interesante y a m\u00e1s de uno le puede servir.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/jcaptcha\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ver ejemplo en funcionamiento<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Harto de probar plugins para captchas sin conseguir el resultado deseado, finalmente me he aventurado a crear un captcha propio personalizado utilizando PHP y jQuery. En este caso, este captcha genera un n\u00famero aleatorio de 4 cifras que se muestra en el formulario para que sea tecleado con el objetivo de habilitar el bot\u00f3n de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6702,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,3],"tags":[100],"class_list":["post-6701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-php","tag-captchas"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JA Numeric Captcha con PHP y jQuery - Jose Aguilar Blog<\/title>\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=\"JA Numeric Captcha con PHP y jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Harto de probar plugins para captchas sin conseguir el resultado deseado, finalmente me he aventurado a crear un captcha propio personalizado utilizando PHP y jQuery. En este caso, este captcha genera un n\u00famero aleatorio de 4 cifras que se muestra en el formulario para que sea tecleado con el objetivo de habilitar el bot\u00f3n de [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-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=\"2015-12-11T11:34:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-05T17:24:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-short.png\" \/>\n\t<meta property=\"og:image:width\" content=\"229\" \/>\n\t<meta property=\"og:image:height\" content=\"171\" \/>\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=\"3 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\/ja-numeric-captcha-con-php-y-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/\",\"name\":\"JA Numeric Captcha con PHP y jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-short.png\",\"datePublished\":\"2015-12-11T11:34:22+00:00\",\"dateModified\":\"2019-03-05T17:24:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-short.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-short.png\",\"width\":229,\"height\":171},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JA Numeric Captcha con PHP y 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":"JA Numeric Captcha con PHP y jQuery - Jose Aguilar Blog","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":"JA Numeric Captcha con PHP y jQuery - Jose Aguilar Blog","og_description":"Harto de probar plugins para captchas sin conseguir el resultado deseado, finalmente me he aventurado a crear un captcha propio personalizado utilizando PHP y jQuery. En este caso, este captcha genera un n\u00famero aleatorio de 4 cifras que se muestra en el formulario para que sea tecleado con el objetivo de habilitar el bot\u00f3n de [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2015-12-11T11:34:22+00:00","article_modified_time":"2019-03-05T17:24:13+00:00","og_image":[{"width":229,"height":171,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-short.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":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/","name":"JA Numeric Captcha con PHP y jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-short.png","datePublished":"2015-12-11T11:34:22+00:00","dateModified":"2019-03-05T17:24:13+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-short.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/12\/jcaptcha-short.png","width":229,"height":171},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/ja-numeric-captcha-con-php-y-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JA Numeric Captcha con PHP y 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\/6701","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=6701"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6701\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6702"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}