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

我遇到了同样的问题，发现并快速简便地为其实施解决方案。首先你必须安装

科尔多瓦-插件键盘

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

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

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

3 个答案: