倾力总结40条常见的移动端Web页面问题解决方案(3)

问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!

解决办法:

可以用html5的oninput事件去代替keyup

<input type="text"> <script type="text/javascript"> document.getElementById('testInput').addEventListener('input', function(e){ var value = e.target.value; }); </script>

然后就达到类似keyup的效果!

27、h5网站input 设置为type=number的问题

h5网页input 的type设置为number一般会产生三个问题,一个问题是maxlength属性不好用了。另外一个是form提交的时候,默认给取整了。三是部分安卓手机出现样式问题。

问题一解决,我目前用的是js。如下

<input type="number" oninput="checkTextLength(this ,10)"> function checkTextLength(obj, length) { if(obj.value.length > length) { obj.value = obj.value.substr(0, length); } }

问题二,是因为form提交默认做了表单验证,step默认是1,要设置step属性,假如保留2位小数,写法如下:

<input type="number" step="0.01" />

关于step,我在这里做简单的介绍,input 中type=number,一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01。

假如step和min一起使用,那么数值必须在min和max之间。

看下面的例子:

<input type="number" step="3.1" min="1" />

输入框可以输入哪些数字?

首先,最小值是1,那么可以输入1.0,第二个是可以输入(1+3.1)那就是4.1,以此类推,每次点击上下箭头都会增加或者减少3.1,输入其他数字无效。这就是step的简单介绍。

问题三,去除input默认样式

input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

28、ios 设置input 按钮样式会被默认样式覆盖

解决方式如下:

input, textarea { border: 0; -webkit-appearance: none; }

设置默认样式为none

29、IOS键盘字母输入,默认首字母大写

解决方案,设置如下属性

<input type="text" autocapitalize="off" />

30、select 下拉选择设置右对齐

设置如下:

select option { direction: rtl; }

31、通过transform进行skew变形,rotate旋转会造成出现锯齿现象

可以设置如下:

-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0); transform: rotate(-4deg) skew(10deg) translateZ(0); outline: 1px solid rgba(255,255,255,0)

32、移动端点击300ms延迟

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpgsz.html