移动端可能遇到的问题解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38179746/article/details/109573228

本文介绍了移动端开发中的若干实用技巧，包括取消iOS首字母大写、实现移动端键盘搜索按钮、消除元素触摸高亮、更改表单占位符颜色、禁止图片长按保存及文字选中、实现拍照功能等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ios如何取消首字母大写

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

2.移动端input键盘右下角搜索按钮

 <form action="" onsubmit="return false">
            <input type="search">
        </form>

解决方式：要一层form；

追杀问题：键盘如何收起 document.activeElement.blur();

3.页面元素被触时产生的半透明灰色蒙层怎么解决 a button input textarea这些标签被触发时都会有

解决方式：通过css样式来解决

input::-webkit-tap-highlight-color:rgba(0,0,0,0)

4.表单输入框placeholder的颜色可以改变吗

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

5. 禁止ios或者安卓的长按保存图片

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

6.如何禁止ios或者安卓长按选中文字

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

7.移动端拍照怎么做

需求：
1、拍照的需求
2、不能在相册选择照片，只能拍照
3、并且拍照后的图片，要显示在页面上
解决：

1、本身input type为file有拍照功能，但是显示效果不好，
所以解决方式：让input隐藏掉，然后让button显示，点击button触发input

<button onclick='document.getElementById("myFile").click()'>拍照</button>
 <input type="file"  capture='camcorder' accept="image/*" style="display: none;" id='myFile'>

2、只是拍照

<input type="file"  capture='camcorder' accept="image/*" style="display: none;" id='myFile'>

最主要： capture='camcorder'

3. 放入图片

var btn = document.getElementById('btn');
            var myFile = document.getElementById('myFile');
            btn.onclick = function(){
                myFile.click();
                myFile.onchange = function(){
                    var myFile = document.getElementById('myFile');
                    var file = myFile.files[0];
                    var fileReader = new FileReader();
                    fileReader.onloadend = function(){
                        if( fileReader.readyState == fileReader.DONE ){
                            document.getElementById('vPhoto').setAttribute('src',fileReader.result);
                        }
                    }
                    fileReader.readAsDataURL(file);
                }
            }