手机web开发输入框被输入法遮盖的处理方法

摘要

本文讨论H5应用的输入框被软键盘遮挡的解决方案

 

WebAPP输入框被软键盘遮挡肿么办?

当输入框处于半屏以下位置软键盘弹出时遇到的坑:
1.输入框被遮挡,看不见输入的内容
2.页面自动上移,但收回软键盘时页面少了一截
3.IOS系统上使用JRoll,IScroll等滑动方案时,光标不随输入框移动
4.软键盘弹出时窗口变小元素错位

解决方案
IOS->使用overflow:auto;-webkit-overflow-scrolling;尽量避免使用JRoll等插件
Android->使用JRoll,可使表单被遮挡时自动移到可见位置,但并不是万能的,遇到窗口大小不会变化的浏览器便会失效

建议从设计角度解决被遮挡的问题,见下文。

目前手机系统、浏览器系统众多,版本各异,表现诡异,兼容起来不比当年IE6轻松,麻辣个蛋,好不容易从PC开发跳到移动开发,还以为手机浏览器加了个-webkit前缀是万能的,握勒个去,谁知滑动卡顿、fixed走位、监听安卓返回键、某些机型focus唤不起软键盘、输入框被软键盘遮挡、安卓4.4以下不支持date等表单类型、滥用css3动画整个APP都不好了等等问题接踵而至,前端开发道远而任重啊~~呃。拿我最近的一个项目举个粟子。
继续阅读“手机web开发输入框被输入法遮盖的处理方法”

使用simple_html_dom 解析html 页面

如果想用PHP 写爬虫 获取某些网页数据,需要能解析HTML页面结构,simple_html_dom是不错的工具。

使用手册:http://simplehtmldom.sourceforge.net/manual.htm

下载:https://sourceforge.net/projects/simplehtmldom/

备注:当将采集的内容存数据库时,记得编码要保持一致,否则会报如下类似错误:

Error: Illegal mix of collations (utf8_general_ci,IMPLICIT) and (gbk_chinese_ci,COERCIBLE) for operation '='

 

jquery倒计时

pc-1938a71a-29c9-11e4-a320-000c29f61318
6
插件描述:网页上的常用的倒计时

实现代码

引用

js

html

css

 演示:http://www.jq22.com/yanshi327
下载示例代码:jquery网页倒计时
【原文摘自:http://www.jq22.com/jquery-info327】

微信接口开发——素材管理

在做微信素材管理接口开发时,有以下几点要注意:

①微信要求传递的数据类型为JSON,若数据中存在中文,在使用json_encode时要记得使用第二个参数( json_encode('包含中文的内容', JSON_UNESCAPED_UNICODE); ),否则中文被用unicode编码编译后,会变成一堆’u32…’的字符,使用时会有麻烦(微信不认识被unicode编码的中文)。

备注:只有PHP版本大于等于5.4版时,json_encode才支持第二个参数。

②上传永久性图文素材时,涉及到的图片media_id必须是通过以下‘上传永久性图片类型素材’接口得到的图片media_id,与‘上传临时图片的media_id’不同。

③上传永久性图片类型素材时,接口为‘http://api.weixin.qq.com/…’,官方文档中提到的‘http://file.api.weixin.qq.com/…’不正确。

屏幕快照 2015-04-14 下午6.45.28

 

④上传永久图文信息时,正常情况下,使用接口上传后,在微信后台可以看到图文式的内容,若微信编辑器无法识别html标签(即微信编辑器里都是些代码似的东西),可以考虑使用html_entity_decode()函数。(最后,提交json格式的数据时,使用json_encode(‘素材数组型内容’,JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE);)

具体测试方法是,使用var_dump()函数打印出在你的编辑器中录入的内容,若浏览器可以识别html标签,则正确;若不能,则在微信编辑器中也无法识别。对比如下

代码一: var_dump($item['content']);var_dump($item2['content']);exit;

效果一(微信编辑器也无法识别):

 

屏幕快照 2015-05-19 下午6.34.53

代码二: var_dump(html_entity_decode($item['content']));var_dump($item2['content']);exit;

效果二(微信编辑器可识别):屏幕快照 2015-05-19 下午6.37.27

【参考:】

关于json_encode: http://www.laruence.com/2011/10/10/2239.html