3

I implemented the following but yet can't see what I am typing. I can see the suggestions while typing, but not what I am typing. Can you help me know where am I going wrong.

<ons-page>
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center">Sign up</div>
  </ons-toolbar>

  <div class="formarea" style="margin-top:234px;">
    <div class="form-row">
      <input type="text" class="text-input--underbar width-half" placeholder="First" value="">
      <input type="text" class="text-input--underbar width-half" placeholder="Last" value="" style="border-width-left: 1px">
    </div>

    <div class="form-row">
      <input type="text" class="text-input--underbar width-full" placeholder="Email" value="">
    </div>

    <div class="form-row">
      <input type="password" class="text-input--underbar width-full" placeholder="Password" value="">
    </div>

    <div class="lucent">
      <p class="note">Password - 6 characters or more</p>
    </div>

    <div class="vspc form-row">
      <ons-button modifier="large--cta">Sign up</ons-button>
    </div>
  </div>

</ons-page>
Leo
  • 77
  • 1
  • 10

3 Answers3

1

I got the same problem and found and quick and easy to implement solution for it. At first you have to install

cordova-plugin-keyboard

Now you are able to register two new event handlers that are called whenever the keyboard appears on screen. The best place to do this is in

index.js

of your cordova project's www/scripts folder inside the

onDeviceReady function

Register the two new event handlers:

window.addEventListener('native.keyboardhide', keyboardHideHandler);
window.addEventListener('native.keyboardshow', keyboardShowHandler);

Also inside your index.js file you implement the corresponding event handler functions that will be called:

function keyboardHideHandler(e){
    console.log('Goodnight, sweet prince: %O', e);
}
function keyboardShowHandler(e){
    console.log('Hello :), sweet prince: %O',e);
    var ta = document.activeElement;
    console.log('so scroll into view: %O', ta);
    ta.scrollIntoView(true);
}

As you can see inside the keyboardShowHandler you get the element that actually has focus (that must be a text input field since the keyboard appeared) and use on simple Javascript function to scroll it into view:

var ta = document.activeElement;
console.log('so scroll into view: %O', ta);
ta.scrollIntoView(true);

Thats it! Every input field thats tapped smoothly scrolls into the visible screen area above the keyboard.

Torsten Barthel
  • 3,059
  • 1
  • 26
  • 22
0

I'm not sure if this is what you want, but if you remove style="margin-top:234px; your sign-up form will be visible. Otherwise, you can use this cordova plugin to handle the keyboard and scroll to the element you need when it is shown. Something like:

ons.softwareKeyboard.on('show', function() {
  // Scroll, focus or whatever you need to do
});

Hope it helps!

Fran Dios
  • 3,482
  • 2
  • 15
  • 26
  • i deliberately added a margin-top in to test the issue. Well i have apps that have been built on onsen and does not show such type of behavior - where the html form overflows but still the keyboard does not hides the text-input. – Leo Mar 30 '15 at 08:44
  • without ons-page tag the issue is resolved but since ons-page is mandatory to intialise the root page issue prevails. – Leo Mar 30 '15 at 08:49
  • 1
    @user2977437 have you find any solution? – fraymas Apr 30 '15 at 16:06
0
<ons-input type="text" onclick="return scroll_view(this)" float></ons-input>

function scroll_view(view){
  setTimeout(function() {
      delay(view);
  }, 500)
}

function delay(view){
  view.scrollIntoView();
}
kiRy fuRy
  • 11
  • 3