How-To

Add jQuery input masking


There are a few jQuery plugins that provide input masking to enforce specifically formatted input from the user.

 

Below is an example of using input masking to ensure the phone and sms phone are entered correctly.

 

The plugin used in this example is found here..

http://digitalbush.com/projects/masked-input-plugin/

 

You will need to download the plugin as jquery.maskedinput.js and upload it to your server in the ABPro main folder..

/components/com_rsappt_pro3/

 

Now edit these code block files:

\components\com_rsappt_pro3\sv_codeblocks\sv_codeblock_basic_info.php
\components\com_rsappt_pro3\sv_codeblocks\sv_codeblock_basic_info_mobile.php

 

Add the red code:

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

?>
<script src="/<?php echo JURI::base( true );?>/components/com_rsappt_pro3/jquery.maskedinput.js"></script>
<script>
  jQuery(function($){
  $("#phone").mask("999-999-9999");
  $("#sms_phone").mask("999-999-9999");
  });
</script>

 

The normal placeholder text shows until the user starts to enter in the box, then the mask shows.