Javascript Will Not Run When Certain CSS Class is on the Input Field

I am not very proficient in CSS or JavaScript yet and need some help. I am doing maintenance on a jsp page that has an input field which acts as a parameter in some search functionality. I added a JavaScript function that allows the user to press the enter key and fire off the search functionality, using the "onkeypress" event. The input field has three CSS classes on it. One of those CSS classes is keeping the JavaScript function from being called. I know this because removing the class allows the JavaScript to run. As soon as I put it back, the JavaScript won't run.

Here is the JavaScript, the CSS class (.personSearch) and the input field respectively.

function searchKeyPress(e) {
        if(typeof e == 'undefined' && window.event) {
                e = window.event; 
        }
        if(e.keyCode == 13){
                document.getElementById('searchButton').click();
        }
}

.personSearch {
    background-image: url(./../images/icons/personSearch.png);
    background-position:center right;
    background-repeat:no-repeat
}

<input class="fillWidth personSearch allowManualInput" 
    name="scrName" 
    id="personSearch-scr" 
    type="text" 
    onkeypress="searchKeyPress(event);"/>

Like I said above, when I actually remove the personSearch class from the input field, the JavaScript runs great. However, when I leave it, the JavaScript won't fire.

Thanks for any help!