文本输入隐藏在键盘弹出窗口 onsen-ui

Question

我实现了以下内容，但看不到我正在输入的内容。我可以在输入时看到建议，但看不到我正在输入的内容。你能帮我知道我哪里出错了。

<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>

Answer 1

我遇到了同样的问题，并找到了快速且易于实施的解决方案。 首先你必须安装

cordova-plugin-keyboard

现在您可以注册两个新的事件处理程序，只要键盘出现在屏幕上就会调用它们。最好的地方是在

index.js

你的 Cordova 项目的 www/scripts 文件夹中的

onDeviceReady 函数

注册两个新的事件处理程序：

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

您还可以在 index.js 文件中实现将被调用的相应事件处理函数：

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);
}

正如您在keyboardShowHandler 中看到的那样，您获得了实际具有焦点的元素（自从键盘出现以来，它必须是一个文本输入字段）并使用简单的Javascript 函数将其滚动到视图中：

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

就是这样！轻按的每个输入字段都会平滑滚动到键盘上方的可见屏幕区域。

Answer 2

我不确定这是否是您想要的，但如果您删除 style="margin-top:234px;，您的注册表单将可见。否则，您可以使用this cordova plugin 处理键盘并在显示时滚动到您需要的元素。比如：

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

希望对你有帮助！

Answer 3

<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();
}