移动端HTML5 input细节优化

最新推荐文章于 2024-05-31 07:17:54 发布

夏末_阳光依然耀眼

最新推荐文章于 2024-05-31 07:17:54 发布

阅读量308

点赞数

分类专栏： html5 css3

原文链接：https://www.jb51.net/html5/747016.html

版权

html5 css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 去掉input 在iOS中的默认圆角和内阴影

iOS下 input会有自带的圆角和内阴影，去掉方法如下：

input{
-webkit-appearance: none;
border-radius: 0;
}

2. 焦点在 input 时，placeholder 没有隐藏

input:focus::-webkit-input-placeholder{
opacity: 0;
}

3. input 输入框调出数字键盘

单独使用type="number"时，iOS调起的并不是九宫格样式的数字键盘，如果需要调起九宫格的数字键盘需要加上 pattern="[0-9]*" 属性

<!-- 数字键盘 带有符号，非九宫格样式 -->
<input type="number"/>

<!-- 九宫格数字键盘 -->
<input type="number" pattern="[0-9]*"/>

<!-- 电话号码键盘 -->
<input type="tel"/>

4. 搜索时，键盘的回车按钮文字设定为“搜索”

解决： input 使用 type="search"，放在 form 表单内。两者结合就能使输入法中的回车按钮文字变为“搜索”

<form action="">
<input type="search" />
</form>

5. 改变input placeholder颜色

::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit*/
color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #666;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */
color: #666;
}

6. iOS下autofocus focus()失效的问题

iOS下不能自动获取焦点，必须是在监听到用户发出的事件的函数中执行focus才有用，比如：

// openNotifyReplay 是click触发的事件
openNotifyReplay = (e) => {
this.setState({
notifyReplayVisible: true
}, ()=>{
document.getElementById("replayPopupText").focus()
})
}

7.JavaScript实现手机浏览器中上滑隐藏地址栏

<script>
    window.οnlοad=function(){
        if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
            bodyTag = document.getElementsByTagName('body')[0];
            bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
        }
    };
</script>

8.使用js动态计算字体大小，这个简直好用的不得了，简直完美还原设计稿

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>template</title>
    <script>    	
    	! function(n) {
			var e = n.document,
				t = e.documentElement,
				i = 720, 		//设计图尺寸
				d = i / 100, 	//1rem = 100px
				o = "orientationchange" in n ? "orientationchange" : "resize",
				a = function() {
					var n = t.clientWidth || 320;n > 720 && (n = 720);
					t.style.fontSize = n / d + "px"
				};
			e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
		}(window);
    </script>
    <style>
    	*{box-sizing: border-box;}
    	body{margin: 0;padding: 0;font-size: 16px;}
        .block{background: #1e90ff;width: 7.2rem;height: 2rem;}
        .block2{background: #ef4437;width: 3.6rem;height: 3.6rem;}
    </style>
    </head>
    
    
	<body>
		<div class="wrap">
			<div class="block">100% 7.2rem 设计图尺寸720，1rem=100px</div>
			<div class="block2">50% 3.6rem</div>
		</div>
	</body>
</html>

夏末_阳光依然耀眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端HTML5 input细节优化

1. 去掉input 在iOS中的默认圆角和内阴影iOS下 input会有自带的圆角和内阴影，去掉方法如下：input{-webkit-appearance: none;border-radius: 0;}2. 焦点在 input 时，placeholder 没有隐藏input:focus::-webkit-input-placeholder{opacity: 0;}3. input 输入框调出数字键盘单独使用type="number"时，iOS调起的并不是九宫格样式的数字
复制链接

扫一扫