ios手机端数字显示黑色和input输入时禁止滑动的解决方案

一、ios手机端数字显示黑色

苹果手机会自动识别出电话号码，以提高用户的体验，但是看着就会和其他元素格格不入，如下图：

 有两个解决方案：

1、在头部标签中加入

<meta name="format-detection" content="telephone=no" />

2、给手机号用a标签框起来，加上href=‘tel’属性，再给a标签添加上和周围元素一样的css样式

<a href="tel:0479-8273287">0479-8273287</a>
<style>
a{
display: block;
color: #fff;
width: 100%;
font-size: 15px;
}
</style>

二、在手机端input框输入时，手机禁止滑动

在手机端input框输入时，手机页面能够上下滑动，不利于能够让用户拥有更好的体验效果，

还要用js实现。

首先实现输入时禁止上下滑动，添加监听事件：

 <input type="text" id="queryTitle" value="$queryTitle" placeholder="主题" onfocus=input() onblur=noInput()>


<script>

function input(){
document.body.addEventListener('touchmove', function (e) {
  e.preventDefault(); //阻止默认的处理方式(阻止上下滑动的效果)
}, {passive: false}); 
};

</script>

passive 参数不能省略，用来兼容ios和android，如果不写passive：false，ios手机端就不能实现。

但是，不清除掉禁止滚动的监听事件，那么即使不输入的时候也不能滑动，所以在失去焦点时清除滑动

<input type="text" id="queryTitle" value="$queryTitle" placeholder="主题" onfocus=input() onblur=noInput()>

<script>

function noInput() {
document.body.removeEventListener('touchmove',function (e) {
  e.preventDefault(); 
}, {passive: false})
};

</script>

看着没有毛病，但是失去焦点能够滑动的功能不能实现，后来查资料发现，addEventListener不能用匿名函数，用了匿名函数会清除不了。。。所以只能把匿名函数摘出来再写

<input type="text" id="queryTitle" value="$queryTitle" placeholder="主题" onfocus=input() onblur=noInput()>

<script>

function preventDefault(e) {
    e.preventDefault();
}
function input(){
document.body.addEventListener('touchmove', preventDefault, { passive: false }); 
};
function noInput() {
document.body.removeEventListener('touchmove',preventDefault, { passive: false })
};

</script>

这次就可以实现了