h5input 在可视范围内弹起

最新推荐文章于 2024-09-06 22:33:47 发布

原创

最新推荐文章于 2024-09-06 22:33:47 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #html

探讨HTML5中input元素在可视区域内的显示优化，确保用户交互时输入框能够正确弹起并保持可见。

h5input 在可视范围内弹起

<!-- 当存在多个input展示在页面上时，我们所需要做的是input元素如果被键盘遮挡需要弹起，否则会被遮盖，这一现象出现在安卓手机上。
我们可以计算当面页面的可视区域，当你的input元素不在可是区域内，将需要将页面滚动到你当前需要的位置，为了更好的用户体验 -->
<template>
  <div class="list" @scroll="scroll">
    <div class="list1">
      <div class="one">
        <input
          type="text"
          placeholder="我是第一个"
          @focus="focus($event)"
          @blur="blur"
        />
      </div>
      <div class="one">
        <input
          type="text"
          placeholder="我是第二个"
          @focus="focus($event)"
          @blur="blur"
        />
      </div>
      <div class="one">
        <input
          type="text"
          placeholder="我是第三个"
          @blur="blur"
          @focus="focus($event)"
        />
      </div>
      <div class="one">
        <input
          type="text"
          @focus="focus($event)"
          placeholder="我是第四个"
          @blur="blur"