Obfuscating e-mails

HTML

<div data-bind="foreach: contacts">
    <div class="contact">
        <div>
            <h5 data-bind="text: firstName + ' ' + lastName + ' / ' + department"></h5>
            <ul>
                <li>Phone: <span data-bind="text: phone"></span></li>
                <li><a href="#whatever" data-bind="click:$root.reveal">E-mail</a> <span data-bind="visible: $root.msgMeToThis() != ''"><input class="merged" data-bind="value: mPrefix" readonly="readonly" /><span data-bind="text: '@' + domain"></span></span></li>
            </ul>
        </div>
    </div>
</div>

CSS

.merged {
    border: 0px;
    text-align:right;
    width:65px;
}

JavaScript

function ViewModel(){
    var self = this;
    
    self.contacts = ko.observableArray([
        { firstName:'John', mPrefix: 'john.doe', domain: 'domain.com', lastName: 'Doe', department: 'Sales', phone: '+358 12 345 6789' },
        { firstName:'Joe', mPrefix: 'joe.w', domain: 'wonder.com', lastName: 'Wonder', department: 'Time wasting', phone: '+358 98 765 4321' },
        { firstName:'Mike', mPrefix: 'yo', domain: 'rappin.com', lastName: 'Rophone', department: 'Audio', phone: '+358 11 222 3333' }
    ]);
    self.msgMeToThis = ko.observable('');
    self.reveal = function(m, e){
        var name = e.target.attributes.href.value;
        name = name.replace('#', '');
        self.msgMeToThis(name);
    };
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);