Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

onsen ui: change page on Enter key press?

  • I’m using onsen ui and I need to know how I can change page on enter key press.

    Basically I have a tab bar with 3 buttons in it and I also have an input button for search.

    I need to know how I can change the page once the user types something into the search input field and then presses Enter button on their keyboard.

    This is my code:

    <ons-tabbar id="menu" animation="slide">
              page="search.html" id="buttonSearch"></ons-tabbar-item>
              page="pts.html" ></ons-tabbar-item>

    and this is my javascript:

    $(document).keypress(function(e) {
        if(e.which == 13) {
    var login = function() {
      var user_input = document.getElementById('search-input').value;
      var men = document.getElementById('menu');
      if (user_input != '') {
        men.resetToPage('tab2.html', { animation: 'slide' });
      else {

    The code above gives me this error:

    TypeError: men.resetToPage is not a function
    could someone please advise on this issue?

    Thanks in advance.

    A working FIDDLE:

  • @Jackson Here is a working fiddle:

    Basically, you are calling a function (method) that does not exist for tabbar. Try setActiveTab. More information here:

    Working code:


  • @munsterlander Thank you very much. it works like a charm.

    Do you know if I could use a separate “animation” for this function?

    Currently the animation for all the page transitions is set at ‘slide’, I was wondering if I could use ‘lift’ as animation for this function that you’ve shown in your Fiddle?

  • ignore my last post. I just noticed that there are only (slide, fade and none) available for the setactive tabbar…

    Thanks for your help…