We've been working on setting up a simple search page to display in Salesforce1 Mobile. The form has a text entry field and a drop-down field. If you enter text in the field, then click the "Search" button, we'd like to have the keyboard disappear to better show the search results. So far, we have not figured out how to get the keyboard to disappear. (Note that I'm currently testing on an iOS device.) Has anyone else encountered this?

Here's some of the relevant Visualforce code that we're working with, for reference. Ideally, we'd like to hide the keyboard when the commandButton is tapped.

<apex:form >
    <h2 class="text-color-2">Near:</h2>
    <apex:input id="search"  value="{!zipCode}" type="text" html-placeholder="Zip code"/>
    <apex:pageMessages id="messages"/>

    <h2 class="text-color-2">Lifetime giving of at least:</h2>
    <apex:selectList id="lifetimeGivingList" value="{!selectedGivingAmount}" multiselect="false" size="1">
        <apex:actionSupport event="onchange" reRender="resultPanel"/>
        <apex:selectOptions value="{!lifetimeGivingOptions}" />
    <apex:commandButton action="{!search}" onclick="goToResults()" styleClass="buttonStyle" value="Search" id="searchButton" reRender="messages,resultPanel, noResultsText"/>
    <apex:outputPanel id="resultPanel">
        <!-- snipped the code showing how we display our results -->
        <apex:outputText styleClass="text-color-2 f3 fw-semibold mvl db tc" value="{!$Label.No_Records}" rendered="{!showNoResultsMessage}" />

<script type="text/javascript">
    $.fn.scrollTo = function( target, options, callback ){
        if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; }
        var settings = $.extend({
            scrollTarget  : target,
            offsetTop     : 50,
            duration      : 500,
            easing        : 'swing'
        }, options);
        return this.each(function(){
            var scrollPane = $(this);
            var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);
            var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(settings.offsetTop);
            scrollPane.animate({scrollTop : scrollY }, parseInt(settings.duration), settings.easing, function(){
                if (typeof callback == 'function') { callback.call(this); }

    $(document).ready(function() {

    function goToResults(){

Thank you for your help!



<apex:form >


<apex:form id="frm">

and make below modification in your method "goToResults"

function goToResults(){
    $("{!$Component.frm.search}").blur(); //Give "frm" as Id to apex:form 

Let me know if it still doesn work. Basically we need to fire Blur event to hide keyboard.

  • Thank you for responding, but that approach does not seem to work in this case. I added an id to my form, and added code into my Javascript to fire the blur() event but no luck.
    – BVH
    Feb 11 '15 at 21:10
  • Do you see any javascript error in your Console ? Can you please check if we are able to get element in Jquery and not trying to fire blur event for undefined. Feb 11 '15 at 21:12
  • I don't see any Javascript errors in the console, and it looks like we're able to access that element. The one thing that I just noticed is that it looks like focus leaves the text box, then comes back to it. I'm trying to find the code that is placing the focus on that text box. Maybe we've got some rogue code that's placing the focus on that box when it shouldn't be.
    – BVH
    Feb 11 '15 at 21:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.