IME输入判断

原始文档

https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionstart

浏览器一般都兼容,但是移动端没有明示网络上说基本支持,可以一用

VUE

vue的input中集成了这个功能
但是这里要注意
input里面监听值的更换有两种方式

// 该方式是支持IME输入判断的
<input v-model="value" type="text">
// 该方式是不支持IME判断的
<input :value="value" type="text" @input="onInput">

可以看一下vue源码
https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/platforms/web/runtime/directives/model.js#L34
https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/platforms/web/runtime/directives/model.js#L134

折行文本末尾定位元素排版方案

说问题之前,先看一张图。

折行文本样图1

 

图中要求蓝色问号图标显示在文本末尾。

关于这个问题和app的同学讨论过,app同学表示实现有难度,让设计同学改了设计稿,将icon放到第一行文本后面,就如同第二行的“成人票”后面那样。

那么wap端能否实现这个效果呢,闭目思考下…

 

答案:能。

 

我们可以把icon直接写在文本后面,这样不就显示在行尾了么。

如果如此简单,app同学怎会轻易示弱,如果第二行只有icon(文字填满第一行),岂不是很难看。

那么我们绝对定位该icon到末尾。
.icon{position:absolute; right:-20px; bottom:0;}
然后我们希望这个元素能定位到我们想要的地方,那么我们希望这个元素的范围是这个样子的。

折行定位2

 

到此就比较明显了(虽然已开始我也没想到),只要设置该元素为内联属性(display:inline)就可以达到这样的效果了。

 

总结:虽然用了绝对定位,但从结构上来讲也还是合理的,主流浏览器都没问题,所以是个可行的方案。

最近看了《隐秘而伟大》,套用到这个问题上,inline虽然是行内元素的默认属性,但也有伟大的一面呀。

关于小米3安卓4.4ROM浏览器兼容问题

经过一些测试,小米3安卓4.4ROM回有一些不可预计的css和js不兼容问题。

可能是小米的开发在浏览器是做了一些优(wan)化(xiao)。

暂时看比较单行的问题是一个老版本swiper插件的拖拽有问题,更具体的还在测试中。

 

从用户的角度,碰到这种问题,影响了浏览,可以通过对浏览器设置->高级->浏览器标识的调整(应该只要不是默认就可以),来恢复正常浏览。

从开发者,用其他插件类库,或者干脆用自己写的东西,来规避这个问题。

android 4.4.2 KitKat 更新对wap页面的一些影响

问题写在前面。

有的时候我们要跟app进行通讯或者跳转,会用到设定好的URL Schemes去做跳转。

有的开发者可能习惯了驼峰式命名,所以把地址协议也设置成firstSecond://这样的形式。

以前应该是没什么问题,新版本的安卓会把协议强制转换为小写,那么如果你的脚本对大小写敏感的话就要注意这个问题了。

 

下面列举一下官方的更新说明:

 

支持蓝牙MAP

Android现在支持消息访问协议(MAP)。因此,支持蓝牙功能的汽车可与您的设备交换消息。

支持Chromecast

借助Android设备和Chromecast,您可以在高清电视上尽情欣赏喜爱的精彩在线娱乐内容(例如来自Netflix、YouTube、Hulu Plus和Google Play的内容)。

Chrome网页视图

嵌入网页内容的应用现可使用Chrome快速、准确地呈现此类内容。

可选字幕

Android现在支持可选字幕和翻译字幕。要启用可选字幕,请转至“设置”>“辅助功能”,然后开启“字幕”。

内置设备管理功能

如果您丢失了设备,可以通过Android设备管理器找到该设备或清空设备数据。

经过重新设计的“下载”应用

“下载”应用经过重新设计,提供了新的排序选项、列表和网格视图,方便您管理下载的文件。

轻松切换主屏幕

如果您喜欢对设备进行个性化设置,并已安装一个或多个可供替换的主屏幕,则可以在“设置”>“主屏幕”中轻松切换。

经过重新设计的“电子邮件”应用

“电子邮件”应用经过全新设计,面貌焕然一新!现在,该应用不但提供文件夹嵌套、联系人照片等功能,还改善了邮件浏览体验。

全屏壁纸,支持预览

壁纸现在可延伸至通知栏和系统按钮区域。更换壁纸时,您可以先预览其效果再进行设置。*

HDR+拍摄模式

Nexus 5提供HDR+拍摄模式,可自动快速连拍多张照片,并将这些照片合成一张,实现绝佳的单张效果。白天拍摄的照片鲜活生动、光影分明;夜间拍摄的照片轮廓清晰、噪点寥寥。*

红外线遥控

在搭载红外(IR)遥控器的设备上,Android现在支持应用对电视和其他附近设备进行远程控制。

“快捷设置”中的位置信息设置

通过“快捷设置”中的新选项,您可以从任何地方快速调整您的位置信息设置。

位置信息模式和监测

如果您想要节省电池电量,请转至“设置”>“位置信息”,然后在“准确度高”和“耗电量低”位置信息模式之间切换。您无需在GPS、WLAN和移动网络设置之间切换。要查看最近有哪些应用申请使用您的位置信息,请转至“设置”>“位置信息”。

音频播放更省电

搭载Android 4.4的Nexus 5极大地延长了您收听音乐的时间,音频播放时间最长可达60小时。*

在锁定屏幕上调整音乐和电影播放进度

您可以在锁定屏幕上跳至歌曲或视频的某个片段。只需长按播放或暂停按钮,然后选择所需时间点即可。

安全的应用沙盒

应用沙盒功能已通过Security-Enhanced Linux得以强化。

内置计步功能

在Nexus 5上使用健身应用(如Moves)时,手机就相当于一个计步器,可用来计算步数。Android 4.4和新硬件可让您以更省电的方式评估自己的运动量。

以全新方式支持碰触付款

Android 4.4采用了全新的开放式NFC支付架构,支持所有移动运营商,允许应用管理您云端或设备上的支付信息。现在,您可以使用Google电子钱包或其他应用,在超过一百万家商店中使用碰触付款功能。

改进触摸屏

结合改进后的软件和Nexus 5的最新硬件,Android现在能以前所未有的速度和准确度,响应您的触摸操作。*

移动端上的点击事件

刚接触手机的时候,前端工程师喜欢用click去处理点击/触摸事件。
渐渐地,通过体验和看过一些文章,我们知道手机上还有touch专用事件,于是我们开始专用touchstart或者touchend来处理触摸事件,然后我们就碰到了各种问题…

Click的延迟问题

click从功能上讲问题不大,但是响应有延迟,传说300毫秒,其实根据机能不同会有更长时间的延迟。

据说一些安卓机用click会出现其他的问题,我没碰到过所以不细说了。

各种touch先天不足

touch响应快,但是你碰到屏幕就是一个touchstart事件,离开屏幕就是一个touchend事件,就算你去拖动屏幕也会执行触发这两个事件,产生的问题我们叫误点击。

解决响应时间和误点击的几个方案

首先我这里不谈jqueryMobile。

那么我知道的几个解决方案为:

fastclick,https://github.com/ftlabs/fastclick;

MBP.fastButton,https://github.com/h5bp/mobile-boilerplate

zepto的tap和singleTap事件,http://zeptojs.com/

上面几个方案都可以很好的解决响应和误点击问题。

那么我们进入正题——“连点”问题

什么是“连点”?
当你点击一个层,而这个层因为事件控制而隐藏了,这时候恰巧这个层下面的区域点击的同一个位置也有点击事件被触发了,那么就是“连点”了。

这个问题发生在弹出层的情况比较多。

上面提到的三个方案在新的手机里面都不太容易(总有特殊情况)出现“连点”问题,但是在老的安卓里面,比如我手上的三星Note中fastclick就会出现连点。

而其他方案表现就很好,所以从这个角度fastclick基本被淘汰了。

还有一种“连点”!

连点还有一种情况,就是你可能在事件里面写了个window.location.href跳转,你这个跳转非常快的完成了,然后又恰巧你跳转的页面在你点击的位置也有个点击事件/链接,那么这个事件/链接也会被触发。
这个是点击问题中最丧心病狂的~
而且关键的是除了click和a标签本身,其他方案都无法避免这个问题。

所以请避免使用点击事件做跳转。

父子Dom的点击事件关系

如果我的一个大dom上有个点击事件,dom中的子dom也有个点击事件,那么点击子dom会执行谁的事件呢?

如果你用click和fastclick就都会执行,其他的方案是执行子dom的事件。

综上所述

如果你在项目中用了zepto,请优先用zepto的相关点击事件,来避免可能发生的问题。
当然了fastclick还有其他的响应功能,如果你需要的话可以在合适的时候去使用它。

手机拖动时js停止运行,倒计时实例

问题描述

 

在手机中拖动手机屏幕(window的scroll事件)或关闭手机屏幕时,会让js暂停运行。

这个状况会直接导致类似倒计时这样的效果出现问题。

比如你做了个页面上的倒计时,按照秒的精度倒数,当你拖动屏幕浏览内容时只要你的手没有放开,那时间是不动的。(可以联想到类似轨迹动画也是会停止的)。

 

我的解决办法

一、改变拖动的方式。

将scroll事件改为touchMove,可以让你在拖动的时候仍然保持js的运行。
典型的插件iscroll,虽然这个插件还不是完全体,有一些已知的bug,但是可以给你一个思路让你解决问题。

这个只能解决拖动上得问题,关闭手机屏幕还是无解的。

 

二、利用机器时间差异

这个算是曲线救国(谢谢数学老师),做一个setInterval来循环调用机器时间(间隔事件根据需要设定),如果与上次的调用时间超出预计,那就是产生了拖动和灭屏的状况,那么我们根据这个时间差,来计算目标时间应该达到的目标状态,并重置到这个状态。
我觉得是个代价相对较小的方法。

 

假设刚进入页面的时间是准确的
已知服务器时间 x 和当前机器时间 y
因为服务器时间和机器时间不一定相等
所以我们假定这个时间差z = x-y;
z为恒定值
获取当前机器时间的代码代价较小,我们可以在定时器中一直获取动态的y,再根据z,校准当前的确定的服务器时间,而不用反复请求。
如果是倒计时,需要的是时间差
那就需要一个目标时间a
时间差b的校准公式应该是
b= a-y-z;

 

三、面对鬼畜产品经理

“我要拖动的时候时间是动的,灭屏回来时间也是对的!”
这个时候结合方法一和二,就可以解决了。
我比较懒,方法在上面,自己写一写…
“什么?灭屏回来会卡顿?”
Sorry…

【转】IE6下DIV容器中双Float元素字符重影bug(IE6重复文字bug)

转载前说明:感谢作者,我终于找到个说法了,之前因为没有相关资料一直是通过改变代码结构来解决该问题的,现在看到这些总结也总算不会无计可施,同样碰到问题的同学有福了。

转载自:http://www.yuzi.me/Share/ie6floatbug.html

ie6floatbug1

IE7 的web标准之道IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计。看着FireFox的 市场占有率不停的上升,微软终于推出了IE7。但IE7是否真的能够力挽狂澜,是否真的能够得到用户的信任,是否真的能够得到网页设计者的认可呢?

估 计很多的朋友都是因为这个华丽的“重复文字”一词进来的,其实这纯粹是一个bug作为。这个bug在国际上比较获得认可的名字叫做——“IE6重复文字 bug”。这是一个非常好玩但是有很令人摸不到头脑的bug。如果,你不知道产生原因的话,将会令人非常头痛。这也是我在现实工作中真正遇到过的情况。

测试一下:复制以下代码放IE6下测试

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”author” content=”Yuzi,煜子,网页设计师网站” />
<meta name=”Copyright” content=”Yuzi,煜子” />
<title>IE6重复文字bug</title>
</head><body><div style=”width:200px; height:100px; padding-left:70px;”><div style=”float:left;”></div>
<!–如果是IE6,你将多看到一个“影”字–>
<div style=”float:left; width:200px;”>IE6下DIV容器中双Float元素字符重影</div>
</div>
</body>

下面是测试页面分别在IE6,IE7,IE8,FireFox(火狐浏览器),Chrome(谷歌浏览器),Oepra以及Safari(苹果浏览器)中显示效果截图

ie6floatbug2

通过截图,你会惊讶的看到在IE6中,多出了一个“影”字。下面来讲讲出现这个“影”字的一些条件(bug重现条件)

一个容器包含2两个具有“float”样式的子容器。

第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小3(说到3,这里稍微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”)

在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)

为何会出现重影

bug虽然的的确确的存在,但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词,谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来,但是现在仍然没有官方的说法。下面列出来的这两种说法,只是现在网上认可度比较高的而已。

说法一:

IE6浏览器对<!– –>注释的解释存在bug引起的。“3像素bug”的扩展后遗症。

说法二:

其他的一些说法,如何消灭重影 引起的原因,也许我们可以不知道,但是如何消除却是我们一定要关注的。”重影bug”已经在IE7中得到修正,在FireFox和Opera中也不会出现,所以bug的修正主要是针对IE6的。

针对于上文中讲到的“bug重现条件”,如果要修正bug,只要让任何一个条件满足即可。有些网友对IE6 重影bug做出了一些想法及议论。

解决方法一:

改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
此解决方案的评论:疯了!因噎废食的做法。

解决方法二:

减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,例如将本文示例中第二个子容器的宽度改为197px。
此解决方案的评论:在满足页面布局的前提下可以使用。但是当情况比较复杂的时候,可能实施起来比较困难。

解决方法三:

去掉所有的注释。
此解决方案的评论:最直接的做法,但是“没有注释的代码”,的确不是一个好的代码写作习惯。

解决方法四:

修正注释的写法。将 <!– 这里是注释内容 –>写成<!–[if !IE]>这里是注释内容<![endif]–>
此解决方案的评论:还不错的解决方案,但是并不是每个人都对<!–[if !IE]>这里是注释内容[endif]–>这种注释写法很欣赏。

解决方法五:

在第二个容器后面加一个或者多个<div style=”clear”></div>来解决。
此解决方案的评论:另人感觉很不爽的解决方案,但是的确能解决,影响网页效率。

关于此bug的一些文章资料,其实很早以前就有外国的朋友关注过这个bug,而且在中国也有过一些朋友关注过这个bug。我在写这篇文章的时候,也一定程度上参照了他们的研究成果,在此向研究此问题的前辈们表示感谢。

html5开发之viewport使用

转自:http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

结合坑爹的viewport一起了解

随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5
viewport的使用能帮你做到这一点……viewport 语法介绍:

01<!– html document –>
02<meta name=”viewport”
03content=”
04height = [pixel_value | device-height]
,
05width = [pixel_value | device-width ]
,
06initial-scale = float_value ,
07minimum-scale = float_value ,
08maximum-scale = float_value ,
09user-scalable = [yes | no] ,
10target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi
| low-dpi]
11″
12/>

width

控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS
的像素)。

height

和 width 相对应,指定高度。

target-densitydpi

一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android
Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的 取值范围

  • device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
  • high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
  • medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
  • low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
  • <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
1<!– html document –>
2<meta name=”viewport” content=”target-densitydpi=device-dpi” />
3<meta name=”viewport” content=”target-densitydpi=high-dpi” />
4<meta name=”viewport” content=”target-densitydpi=medium-dpi” />
5<meta name=”viewport” content=”target-densitydpi=low-dpi” />
6<meta name=”viewport” content=”target-densitydpi=200″ />

为了防止Android Browser和WebView
根据不同屏幕的像素密度对你的页面进行缩放,你可以将viewport的target-densitydpi 设置为
device-dpi。当你这么做了,页面将不会缩放。相反,页面会根据当前屏幕的像素密度进行展示。在这种情形下,你还需要将viewport的width定义为与设备的width匹配,这样你的页面就可以和屏幕相适应。

initial-scale

初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target
density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。

maximum-scale

最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target
size相比,最多能放大2倍。

user-scalable

用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale
和 maximum-scale都将被忽略,因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

例:

(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)

<meta name=”viewport” content=”width=device-width,user-scalable=no”
/>

(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)

<meta name=”viewport”
content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>