Android-WebView集成iScroll4之input框无法获取焦点

最近给公司做一个企业App，Android客户端+Java服务端，总共有十几个模块，其中有几个模块就是从服务端查询数据，手机上的功能有列表展示及下载附件。

 

我是做Java服务端开发的，不会Android，另外有android开发人员，经过讨论决定这块手机直接访问Java服务端（Java web系统）的页面，源自于开始给公司一个pad应用，也是光查询数据用，采用的是Android的webview访问web的一个url。

 

其实webview这种做法，最简单，省事，省成本，不用纯Android开发，web页面能访问，没问题，拿到手机上，或pad上测试——基本没什么大问题，有的话也是些css，js兼容性的问题。

 

所以这个功能我很快就在服务端开发完了，就是为了样式和兼容性，引入了jQuery-1.9.1，jquery.mobile-1.3.2。页面上一个文本输入框，可以输入标题进行查询，下面展示的就是列表。在手机上也测试了，大部分手机都没问题。

 

后来，交给测试部测试，人家来个压力测试，才1000多条数据，直接就死掉了，因为这个列表没有做分页功能。好了，加分页吧，关键是手机上分页得下拉刷新那种，怎么做，上网一搜，发现都在用开源的iScroll，网上有很多例子，后续也会专门来写这块，所以很快就加入到项目中，分页效果还不错，下拉刷新，上拉加载更多数据。

 

但是迎来的第一个问题就是那个input输入框怎么都没有焦点，压根不能输入，这必须得解决啊，开始没去网上搜，觉得是个小问题一会儿就能搞定，最后发现不是这么回事。我开始解决办法是页面加载完成后写js让input获得焦点就是设置focus方法了，电脑上好使，手机上不好使。后来Android开发人员说，它在Android端能够调我页面的js方法，这样好啊一试，发现有些手机上好使了，但是有些还是不好使。没办法，我把js一层一层过滤发现是iScroll的问题，只要把这个加载进来就不好使，去掉就好使，带着这个问题再上网搜，晕，发现网上到处是这个问题，而且解决办法千篇一律，就是让iScroll过滤input等html标签：

onBeforeScrollStart: function (e) {
				var target = e.target;
				while (target.nodeType != 1) {
				target = target.parentNode;
				}
				if (target.tagName != 'SELECT' && target.tagName != 'TEXTAREA' && target.tagName != 'INPUT') {
				e.preventDefault();
				}
			},

 重写这个方法，加上要过滤的标签input等。

按照这个改了后，发现电脑上好使，我用的chrome最新的39，专门为开发webview页装的，手机上还是不行，找了半天原因，还是不知道哪出问题。后来测试版本升级，给卸了重新安装，再测，发现好了，突然明白了是手机上缓存的原因。缓存啊，一直都在关注浏览器的缓存，忽视了手机上的缓存，还是手机开发做的少啊。