移动端常见问题

1.ios如何取消input的首字母大写
解决方法：添加autocapitalze='off'

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

2.移动端input键盘右下角搜索按钮怎么出来的？
解决方法：加一层form,并且阻住发送form表单

 <form action="" onsubmit="return false" id="myform">
    <input type="search">
 </form>
//键盘收起：document.activeElement.blur()

3.页面元素被触摸时产生半透明灰色的蒙层怎么解决？常见于a、button、input标签
解决方法：

a{
-webkit-tap-highlight-color: rgba(0,0,0,0)
}

4.如何更改placeholder属性中文字颜色
解决方法：

input::-webkit-input-placeholder{
    color:red
}

<!-- pc端因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定-->
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:red;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:red;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color:red;
}

5.禁止长按保存图片
解决方法：

img{
-webkit-touch-callout:none;
}

6.禁止长按选中文字
解决方法：

p{
-webkit-user-select:none;
}

7.移动端click事件延迟300ms
原因：判断是否需要双击进行页面缩放
解决方法：1.fastclick https://blog.csdn.net/qq_37730829/article/details/109155753

 <!-- 2.禁用缩放 user-scalable=no -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

实现拍照功能，并显示界面上
实现：本身input type='file'有拍照功能，但效果不好，所以可以让input隐藏，让button显示,点击button触发input

<button id="btn">拍照</button>
<input type="file" id="myfile" style="display: none;">
<img id="myimg">
<script>
let btn = document.getElementById('btn');
let myfile = document.getElementById('myfile');
btn.onclick = function(){
    myfile.click() 
    myfile.onchange = function(){
        let file = myfile.files[0]
        let fileReader = new FileReader()
        fileReader.onloadend = function(){
            if(fileReader.readyState === fileReader.DONE){
               document.getElementById('myimg').setAttribute('src',fileReader.result)
            }
        }
        fileReader.readAsDataURL(file)
    }
}
</script>