3

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

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

3 回答 3

1

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

科尔多瓦插件键盘

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

index.js

您的科尔多瓦项目的 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);

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

于 2016-05-20T13:59:14.717 回答
0

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

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

希望能帮助到你！

于 2015-03-30T02:58:43.617 回答
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();
}
于 2019-07-20T16:37:28.950 回答