Question

I have the html below; in Joomla email addresses appear on your website obfuscated, or ‘cloaked’. I have been using this to display email addresses on my website, JHtml::_(’email.cloak’, ‘[e-mail]’). But I can’t seem to display an email address in an input text field.

<input id="email_field" name="email" placeholder="<?php echo JHtml::_('email.cloak',$result->email_address, 0); ?>" type="text" />

Using the code above will generate the following script in the input field..

<script type='text/javascript'>  
    <!--  var prefix = 'ma' + 'il' + 'to';  
    var path = 'hr' + 'ef' + '=';  
    var addy16915 = 'user' + '@'; 
    addy16915 = addy16915 + 'user' + '.' + 'com';  
    document.write(addy16915);  //-->\n 
</script>

<script type='text/javascript'>  
    <!--  document.write('<span style=\'display: none;\'>');  //-->  
</script>

This email address is being protected from spambots. You need JavaScript enabled to view it.

<script type='text/javascript'>  
    <!--  document.write('</');  document.write('span>');  //-->  
</script>

Any ideas? Thanks

Answer 1

JHtmlEmail::cloak can only write document text, it can not write in element attributes as in your case. If you really need this you would have to create your own JHtml helper. This could be accomplished by the steps below.

Implementing a Joomla function for cloaking emails in attributes:

Create the helper class at your_components/helpers/html/specialemail.php:

<?php
defined('_JEXEC') or die;

abstract class JHtmlSpecialEmail
{
    public static function cloak($id, $attribute, $mail)
    {
        // convert text
        $mail           = JHtmlSpecialEmail::_convertEncoding($mail);
        // split email by @ symbol
        $mail           = explode('@', $mail);
        $mail_parts     = explode('.', $mail[1]);
        // random number
        $rand           = rand(1, 100000);

        $replacement    = "\n <script type='text/javascript'>";
        $replacement    .= "\n <!--";
        $replacement    .= "\n var prefix = '&#109;a' + 'i&#108;' + '&#116;o';";
        $replacement    .= "\n var path = 'hr' + 'ef' + '=';";
        $replacement    .= "\n var addy". $rand ." = '". @$mail[0] ."' + '&#64;';";
        $replacement    .= "\n addy". $rand ." = addy". $rand ." + '". implode("' + '&#46;' + '", $mail_parts) ."';";
        $replacement    .= "\n document.getElementById('$id').$attribute = addy$rand.replace(/&#(\d+);/g, function (m, n) { return String.fromCharCode(n); });";
        $replacement    .= "\n //-->";
        $replacement    .= '\n </script>';

        return $replacement;
    }

    protected static function _convertEncoding($text)
    {
        // replace vowels with character encoding
        $text   = str_replace('a', '&#97;', $text);
        $text   = str_replace('e', '&#101;', $text);
        $text   = str_replace('i', '&#105;', $text);
        $text   = str_replace('o', '&#111;', $text);
        $text   = str_replace('u', '&#117;', $text);

        return $text;
    }
}

Then write your input email element like:

<input id="email_field" name="email" placeholder="" type="text" />
<?php JHTML::addIncludePath(JPATH_COMPONENT.DS.'helpers'.DS.'html'); ?>
<?php echo JHtml::_('specialemail.cloak', 'email_field', 'placeholder', '[e-mail]'); ?>

It uses the same cloak algorithm as the original Joomla cloak function. Instead of using document.write to output the email to the document, it uses a snippet from this answer to decode the ASCII entities and then sets the value to the chosen attribute directly.