游走在移动端的"Find in page"，WebView实现页内文字查找

从桌面端到移动端，"Find in page"功能早已成为了浏览器乃至系统级的功能，几乎每个浏览器都会提供。比如，在PC端，可以通过"Ctrl + F"（Windows）或"Cmd + F"（Mac）快捷键打开搜索框，输入要查找的关键词，即可在当前页面中进行搜索。

在移动端，由于屏幕尺寸的限制，键盘输入并不方便，因此移动浏览器通常会提供一个专用的搜索框来实现"Find in page"功能。比如，在iOS系统中，可以在Safari浏览器的地址栏中输入关键词，然后点击"查找"按钮进行搜索。在Android系统中，可以在Chrome浏览器的工具栏中点击"查找"图标打开搜索框。

如果我们在移动应用程序中使用了WebView控件来加载网页，那么我们也可以使用JavaScript和CSS来实现"Find in page"功能。具体步骤如下：

1. 在WebView中创建一个input元素，并设置其type属性为"search"。
2. 在input元素中添加一个keyup事件监听器，并在事件处理函数中使用JavaScript的document.execCommand("find", false, keyword)方法进行搜索。
3. 在WebView中创建一个div元素，并设置其style属性为"position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 16px; padding: 10px;"。
4. 在div元素中创建一个p元素，并设置其id属性为"search-result"。
5. 在input元素的keyup事件处理函数中，使用JavaScript的document.getElementById("search-result").innerHTML = result;语句将搜索结果显示在p元素中。

这样，我们就可以在WebView中实现"Find in page"功能了。在使用时，用户只需在input元素中输入要查找的关键词，然后按回车键即可。搜索结果将以高亮的形式显示在网页中。

为了提供更好的用户体验，我们还可以对"Find in page"功能进行一些优化。比如，我们可以使用CSS的伪类选择器来对搜索结果进行样式设置，以便使其更加醒目。我们还可以使用JavaScript的requestAnimationFrame()方法来优化搜索结果的显示速度。

通过这种方式，我们就可以在WebView中实现一个功能强大、易于使用的"Find in page"功能，从而提高移动端应用程序的用户体验。