Utilicé el siguiente código en WPforms en Wordpress para permitir solo caracteres en inglés, números y caracteres de espacio en mi formulario. Todo funciona muy bien hasta que lo pruebas desde el móvil (la misma web y el mismo formulario, Chrome en Android por ejemplo), simplemente no funciona y te permite rellenar cualquier carácter en los campos... ¿hay alguna forma de evitarlo? ¿Me refiero a hacer que funcione para dispositivos móviles y no permitir que los visitantes coloquen caracteres especiales desde dispositivos móviles también?
function wpf_dev_char_restrict() { ?> <script type="text/javascript"> jQuery(function($){ $( '.wpf-char-restrict' ).on( 'keypress', function(e){ var regex = new RegExp('^[a-zA-Z0-9 ]+$'); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { alert ( "Please fill out the form in English. Thank you!" ); // Put any message here e.preventDefault(); return false; } }); //Prevent any copy and paste features to by-pass the restrictions $( '.wpf-char-restrict' ).bind( 'copy paste', function (e) { var regex = new RegExp('^[a-zA-Z]+$'); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { alert ( "Pasting feature has been disabled for this field" ); // Put any message here e.preventDefault(); return false; } }); }); </script> <?php } add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_restrict', 10 );Utilice el evento de input . Este evento se activará cualquiera que sea el método de entrada: teclado, arrastrar/soltar con el mouse, menú contextual, portapapeles, otro dispositivo.
Este evento se activa cuando la entrada ya ha cambiado, por lo que deberá realizar un seguimiento del valor tal como estaba antes de la última modificación:
jQuery(function($){ var accepted = ""; $( '.wpf-char-restrict' ).on( 'input', function() { var regex = /^[a-z0-9 ]*$/i; if (!regex.test($(this).val())) { alert ( "Please fill out the form in English. Thank you!" ); $(this).val(accepted); } else { accepted = $(this).val(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="wpf-char-restrict">NB: Es posible que desee permitir algún tipo de puntuación en la entrada (como coma, punto, etc.).