Monaca Onsen UI Discord Chat Github Repo

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…