JA Numeric Captcha con PHP y jQuery

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úmero aleatorio de 4 cifras que se muestra en el formulario para que sea tecleado con el objetivo de habilitar el botón de «Enviar» el formulario.

Para generar un número aleatorio de 4 cifras lo haremos con PHP de la forma siguiente:

Source code

<?php
srand(time());
$captcha_value = (string)rand(1000,9999);
$captcha_numbers = array(0,1,2,3,4,5,6,7,8,9);
?>

Además de generar el número aleatorio, estamos declarando un array con todos los números que recorreremos en el formulario para generar nuestro teclado virtual.

Dentro del formulario añadiremos el código de nuestro captcha:

Source code

<p class="form-group current_captcha">
    <?php echo $captcha_value; ?>
</p>
 
<p class="text form-group">
    <label for="captcha" class="captha_numbers">
        <?php foreach ($captcha_numbers as $number) {
            echo '<a href="#" data="'.$number.'">'.$number.'</a> ';
        }
        ?>
    </label>
    <input type="text" size="4" maxlength="4" id="captcha" name="captcha" class="form-control" disabled="disabled">
    <input type="hidden" id="current_captcha" name="current_captcha" value="<?php echo $captcha_value; ?>">
</p>

Inicialmente mostramos el código captcha generado aleatoriamente y seguidamente mostramos nuestro panel virtual para seleccionar los números. Tenemos un campo desactivado donde se va guardando los números que se van pulsando y otro campo oculto donde queda registrado el código actual del captcha.

El formulario deberá tener un botón parecido a este:

Source code

<input onclick="$(this).hide();" class="btn btn-default button button-medium" name="submitContact" value="Enviar" type="submit">

La parte más interesante del asunto la hacemos con jQuery de la siguiente forma:

Source code

<script>
$(document).ready(function(){
    $('.button').attr("disabled", true);
    $('.captha_numbers a').on('click', function(){
        var data = $(this).attr('data');
        $('#captcha').val($('#captcha').val() + data);
 
        if ($('#captcha').val() == $('#current_captcha').val())
            $('.button').attr("disabled", false);
 
        return false;
    });
});
</script>

Lo primero que hacemos es desactivar el botón de nuestro formulario. Después capturamos el evento «click» de cada número para registrarlo en el campo que tenemos desactivado. Hacemos una comparación del contenido del campo desactivado (lo que se está escribiendo) con el campo oculto (número aleatorio) para habilitar o no el botón.

Para hacerlo funcionar es importante incluir la librería jQuery.

La demostración esta basada en Bootstrap añadiendo un poco de estilo:

Source code

.current_captcha {
    font-size: 22px;
    font-style: italic;
    color: red;
}
 
.captha_numbers {
    margin-bottom: 10px;
}
 
.captha_numbers a {
    border: 1px solid #0085CF;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    color: #0085CF;
    padding: 4px;
    text-decoration: none;
}
 
.captha_numbers a:hover {
    background-color: #0085CF;
    color: #ffffff;
}

He optado por publicarlo porque me ha parecido interesante y a más de uno le puede servir.

Ver ejemplo en funcionamiento