阅读 134

H5 文件检索(ios端兼容问题)

需求:

实现按搜索内容实现全文检索,支持查看搜索结果上一个下一个,页面会自动滚动到指定位置。如图:

需求听起来很简单,但是遇到一些ios上面的坑。在此总结一下:

  • 搜索框吸顶定位。
  • input 长按页面滚动。
  • js设置回车文案(search)

1、搜索吸顶

方案一:fixed绝对定位。遇到的坑是input在获取光标时整个定位会出现有上到下的滑动出现问题,搜索结束后滚动页面也会出现短暂的定位失效。查找了一下文档,没有很好的解决办法。所以果断转了方案二。

方案二:absolute + 动态高度。

  • 首先设置搜索内容的定为,利用js根据页面的高度计算出屏幕高度然后给内容(main)模块设置动态高度。设置之后会出现滚动不流畅以及搜索回车之后页面整体上移问题。不要慌,接下来解决这个两个问题
  • 滚动不流畅。我是用的overflow:scroll;-webkit-overflow-scrolling: touch;解决的,百度一下就能出来。
  • 页面整体上移我用了取巧的办法,在回车事件内给input直接添加blur()事件,这样就不会出现页面上移的情况了。 到此我们的第一个搜索吸顶问题得到解决😝。

2、input长按粘贴的时候回出现页面滚动现象

我采用的是记住页面当前滚动位置,在input获取光标的事件内加上滚动到此位置就可以了 。代码如下:

$("html, body .info").animate({
   scrollTop: old_scroll_top + "px"
 }, 0);
复制代码

3、js设置回车文案(search)

必须要添加from表单才可以实现。代码如下:

<form action="#" class="search-left" onsubmit="return false;">
  <input id="search" type="search" class="search-inp" value="" placeholder="Search"/>
  <span class="results">1/75</span>
  <img class="clear-inp" alt="" src="img/close.png" />
</form>
复制代码

到此填坑完毕👻👻👻。

接下来讲一下怎么实现的全文检索

很简单,就是利用了一个选择器方法 contains,用法请自行百度。然后正则查找,文本替换完美搞定。

总结

只是简单的叙述了一下自己遇到的问题以及我的解决方法。如有更好的欢迎讨论。或者不明白的也欢迎提问😋。

文章分类
前端
文章标签