于是我把查找和替换窗口激活,按下Atrl+空格,再按下M,通过方向键移动窗口,尼玛,终于回到桌面上了!
以后遇到桌面上窗口消失,但Tab切换能显示出来,激活窗口,按下Atrl+空格,再按下M,方向键移动窗口
一、兼容性测试的环境
1、兼容性测试:是指测试项目在特定的软件平台上,使用不同的应用软件、不同操作系统在不同的网络环境中正常运行。
2、Web兼容测试的主要类型:常见的操作系统有Windows7、WindowsXP等。用户使用操作系统的类型,决定了我们操作系统平台兼容性测试的操作系统数量,进行操作系统的兼容性测试的主要目的就是保证我们测试的项目在该操作系统下能正常使用。
二、兼容性测试方法:
1、功能点测试:看软件是否满足所需要的功能
2、字符串长度检查:输入超出需求字符串长度内容,看页面是否报错(如:登录密码要求6-20位数字、字母和下划线组成,可设置小于6位或大于20位数字、字母和下划线来验证)
3、字符类型检查:输入制定字符类型以外的类型,看页面是否会报错
4、标点符号检查:输入特殊字符,如:空格、各种引号、回车键,查看系统是否做正确处理
5、中文字符处理:在需要输入中文的地方输入英文字符,看是否会出现乱码或故障
6、信息重复:唯一性检查。输入重复的名字、ID、身份证号等(区分大小写)
7、界面检查:正确性、友好型、一致性和易用性。
我们进行兼容性虽然没办法做到完全的质量保证,但对一个项目来讲兼容性测试却是软件测试中不可缺少的部分。
起因
最近经常在群里看到诸如以下这些问题:
怎么按键盘的Enter键提交表单呢?
移动端怎么聚焦时让键盘变成数字键呢?
移动端如何绑定键盘右下角【提交按钮】事件?
移动端键盘右下角【提交】如果换成【搜索】呢?
针对这些问题分享下我对使用表单的一些建议。
优化前
<ul>
<li>
<span>用户名:</span>
<input type="text" name="username">
</li>
<li>
<span>密码:</span>
<input type="password" name="password">
</li>
<li>
<span>搜索词:</span>
<input type="text" name="key">
</li>
<li>
<span>手机号:</span>
<input type="text" name="tel">
</li>
<li>
<span>年龄:</span>
<input type="text" name="age">
</li>
<li>
<span>自我介绍:</span>
<textarea name="content"></textarea>
</li>
<li style="padding-left: 70px">
<input type="button" value="保存" id="J-save">
</li>
</ul>
<script>
$("#J-save").on("click", function () {
// 验证信息
// 异步 or 同步提交
alert("保存中");
});
</script>
以上代码是常见的表单元素的结构,一般是绑定提交按钮的click事件,然后处理验证用户输入的信息,符合条件后用ajax异步或者某种方式跳转。
也有些fe会套一层form标签,但还是绑定的click事件。
优化点
针对以上的表单元素优化点如下:
始终使用form标签
只要是表单元素始终在元素外层包裹form标签,说好的我们一起手拉手语义化呢?
始终绑定submit事件
不单独的对【提交】按钮绑定click事件,对整个表单绑定submit提交事件,这样可以让整个表单内的文本框获得Enter提交的VIP待遇,并且在移动端中可以让文本框聚焦时键盘的右下角是【前往】。
再加上对表单里元素值的验证+聚焦,可以达到【输入->回车->错误->输入->回车->提交】一气呵成的体验。
这个可以解决上面的问题1、问题3
placeholder占位
合理的使用placeholder占位,但要考虑兼容性。兼容方案:
使用value模拟需要注意提交时判断value是否是默认占位的值,比较坑
使用span标签定位显示,需要考虑到直接设置元素值时的触发情况
maxlength
如果已知元素理想的输入长度,不妨设置下元素的最大长度属性,并且兼容性很好哦。从一定程度上避免了用户的误输入,从而提升用户体验。
label
表单元素的描述文字应该使用label标签包裹,并且使用for属性指向表单元素,从而达到点击描述文字可以聚焦文本框的效果,如:
<li>
<label for="J-username">用户名:</label>
<input type="text" name="username" id="J-username">
</li>
聚焦时的状态
在文本框聚焦时理论来说应该让用户感知出来,而不是纹丝不动。
聚焦时页面的位置
聚焦时考虑页面滚动到焦点元素的最佳可视范围。
你还需要考虑在移动端中聚焦时页面老跑偏...
表单的异步提交状态
当表单异步提交过程中需要向后端发送数据,可能会经历 提交中、提交出错、提交成功 的状态,还要考虑到提交中再次提交(重复提交)的问题。
比如在提交时设置提交按钮的disabled = true,并且使其变灰,显示【提交中...】是不是更友好些呢?手拉手的问题我就不再说了...
再延伸
考虑到用户网络慢,在用户没有加载完成js时提交了表单
后端原生支持 - 后端即使纯form提交也可以正常的接收
默认阻止 - 在form标签默认阻止onsubmit="return false",js初始化时处理掉
autocomplete - 根据业务场景判断是否使用自助补全功能,可以在整个表单form添加,也可以在input元素添加
移动端文本聚焦时fixed失效
表单中重置按钮
最近碰到一个项目,要求使用gb2312,平常写代码时,用的编码都是utf-8,这两者有什么区别呢,我们又该如何选择呢
首先我们要理解编码是什么,编码是信息从一种形式或格式转换为另一种形式的过程也称为计算机编程语言的代码简称编码。用预先规定的方法将文字、数字或其它对象编成数码,或将信息、数据转换成规定的电脉冲信号。编码在电子计算机、电视、遥控和通讯等方面广泛使用。编码是信息从一种形式或格式转换为另一种形式的过程。
utf-8和gb2312是编码格式的一部分,查阅了一下有关utf-8和gb2312的资料:
utf-8:是一种针对Unicode的可变长度字符编码,又称万国码。由Ken Thompson于1992年创建。现在已经标准化为RFC 3629。utf-8用1到4个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言(如日文,韩文)
gb2312:信息交换用汉字编码字符集。《信息交换用汉字编码字符集》是由中国国家标准总局1980年发布,1981年5月1日开始实施的一套国家标准,标准号是gb2312—1980。gb2312编码适用于汉字处理、汉字通信等系统之间的信息交换,通行于中国大陆;新加坡等地也采用此编码。中国大陆几乎所有的中文系统和国际化的软件都支持gb2312。
国内很多大的网站比如:百度搜索,新浪网,搜狗搜索引擎等用的编码都是utf-8,部分网站,学校官网则使用gb2312。
所以utf-8是国际编码,gb2312是中文编码,如果只是国内用户使用的话,则选择gb2312,但是国外访问gb2312编码的网站就会乱码,而utf-8是世界性通用代码,国内国外访问均不会出现乱码状况。
总结:从文字支持上说utf-8比GB2312要多。一般企业站看情况自己选择网页编码。在开发的时候就要确定使用哪种编码,以防网页乱码。同时在dedecms、帝国、phpcms等网站系统时,开发HTML和使用开源程序编码也要保持一致(前几天自己用gb2312的HTML在编码为utf-8的phpcms上套模板,就出现网页乱码情况)。当然个人比较倾向utf-8,感觉很少出现乱码状况。