周五在ubuntu上测了一下重构后的富文本, 发现依然存在一个bug: 开启了中文输入法的话, 输入框就监听不到按钮事件了.
这个问题在webqq的聊天框一直存在着, 也有很多用户投诉, 具体表现为: 切换到中文输入法(ibus or other), 输入一段内容后, 第一次按下回车键可以发送消息, 之后的回车键都变成输入框的换行了.
花了一个中午排查了下, 总算找到原因了:
在ubuntu上面, 切换到中文输入法的时候, 只有第一次按下的keydown/keyup事件会被抛出, 之后都keydown和keyup事件都会被输入法接收且不会冒泡, 因此输入框没办法对按钮作出响应. 这个行为跟用什么浏览器无关, 我在firefox和chrome都发现有这个问题. 如果你的系统是ubuntu, 可以点击这里测试.
幸运的是, 经过测试, 发现keypress能响应回车键(以及其他ctrl+v等没触发出中文输入法的键盘行为), 因此可以把监听回车事件的代码转移到keypress中, 解决掉这个存留已久的bug.
注意: opera的keypress事件是没有charCode的, 且keyCode与keydown/keyup事件的keyCode一致, 无语…
2011-6-6 更新: Read More »
一个游戏群里的同事提到一个Bug, 在他的页面里, 实际内容是超过了6000px的, 而且给包含内容的容器加了个border: 1px dotted #fff, 这时在chrome中就发现左右边框消失了!!!
如果你的是chrome, 点击这里查看demo. 这个问题相当诡异, 如下:
1. 改成2px, border出来了!
2. 改成solid, 又出来了!
3. 高度低于4096, 呃, 又出来了…不过还是少了一些点, 改成4095就很正常了…
暂时还没有找到解决办法, chrome处理超过2的40次方之后的数字溢出了, chromium的项目里已经看到有人提了bug, 但是到目前为止(chrome 12.0.733.0)依然如此. 也许某天google大神心情好了, 会fix它吧. ╮(╯_╰)╭
上周抽空把去年写的富文本重写了一下, 封装成基本UI组件, 就可以在聊天框之外的地方复用了. 个人觉得富文本是个兼容问题最多的模块之一, 尤其是文档也没几个, 把mozilla的api文档和IE的dom api关于selection和range的看了一个遍, 一个个试, 总算找到勉强能用的方法.
其实之前的富文本代码太乱, 而且还有不少bug, 只是产品经理不给时间改, O__O”…
这个富文本没有用iframe来做输入框, 原因有二:
- iframe是所有dom节点中消耗性能最大的, 开多几个ie6/7就会卡到不行了;
- 因为webqq是多窗口聊天的, 当光标点击到输入框时, iframe会捕获鼠标事件, 通知不了聊天窗设置样式;
所以就用了div, 设置contentEditable=”true”, 这个属性基本浏览器都支持, 除了firefox2.0(不过还真有用户还在用ff2.0⊙﹏⊙b汗)
这次修改发现了不少蛋疼的兼容性问题, 挑几个归纳一下:
Read More »
发现实际项目中经常需要判断一个节点是否是另一个节点的子节点, google了一下以及在做富文本的时候顺便看了下mozilla的api文档, 发现个compareDocumentPosition方法, 可用来比较两个节点位置. ie则有更好用的方法contains, 只要传入的节点是其子孙节点就返回true. Read More »