我不是真的输入框，我只是一个div

经常开发移动端的小伙伴应该都会遇到过这样的一个问题：

产品经理：系统自带的输入键盘太丑了，我们能不能自己实现一个？
我：这不简单嘛，完全哦得k

一个小时后~~

我满头大汗的坐在电脑前，想：

“我是自己写辞职信呢，还是等他开除我呢，这是个问题”

为啥？

因为原本一个看似简简单单的需求，差点阴沟里翻车

不过好在聪明机智在两个小时候终于如期完成任务

解决方案

input 一旦获取焦点，在移动端设备上，会直接调起系统键盘

就像这样

拦都拦不住

那怎么办

禁用它，添加点击事件

input 添加禁用属性

// index.html
<input type="text" disabled="disabled" >

父级元素，并增加点击事件

为啥要添加父级？还不是因为input禁用后事件失效

// html
<div class="input_parent" onclick="onInputClick()">
    <input type="text" disabled="disabled" >
</div>

<div class="keys">
    自定义键盘
</div>

// script
function onInputClick(){
    // 调起自定义键盘
    document.getElementsByClassName('keys')[0].style.display = 'flex'
}

效果

可以是可以了，但是

光标呢？没有光标还算是个输入框吗？

这当然不算

得，回炉重造

这次我们不用 input 我们用万能的 div + 伪类元素 :after

第一步

一个 div ，一个 :after，在来一个小小的动画

// html
<div class="input"></div>

// style
.input{
    min-height: 2rem;
    width: 15rem;
    font-size: 2rem;
    border: 0.1rem solid #8A8A8A;
    padding: 0.5rem;
}
		
.input::after{
    content:'|';
    color: #8A8A8A;
    animation:cursor 1.5s linear infinite;
}
@keyframes cursor{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

看看效果

我们加上事件逻辑，再来看看效果

最后

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title></title>
	</head>
	<style>
		body{
			display: flex;
			height: 100vh;
			width: 100vw;
			overflow: hidden;
		}
		.box{
			margin: auto;
		}
		
		.input{
			min-height: 2rem;
			width: 15rem;
			font-size: 2rem;
			border: 0.1rem solid #8A8A8A;
			padding: 0.5rem;
		}
		
		.input::after{
			content:'|';
			color: #8A8A8A;
			animation:cursor 1.5s linear infinite;
		}
		
		@keyframes cursor{
			0%{
				opacity: 1;
			}
			50%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		
		.keys{
			position: fixed;
			height: 30vh;
			bottom: 0;
			left: 0;
			right: 0;
			display: none;
			justify-content: center;
			align-items: center;
			background: #8a8a8a;
			box-sizing: border-box;
			flex-wrap: wrap;
		}
		
		.keys_item{
			width: calc(100% / 2 - 2rem);
			height: calc(100% / 3 - 1rem);
			margin: 0.1rem;
			background: indianred;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 2rem;
		}
		.
	</style>
	<body>
		<div class="box">
			<div class="input" onclick="onInputClick()">

			</div>
		</div>

		<div class="keys">
			<div class="keys_item" onclick="onKeyClick(1)">1</div>
			<div class="keys_item" onclick="onKeyClick(2)">2</div>
			<div class="keys_item" onclick="onKeyClick(3)">3</div>
			<div class="keys_item" onclick="onKeyClick(4)">4</div>
			<div class="keys_item" onclick="onKeyClick(5)">5</div>
			<div class="keys_item" onclick="onKeyClick(6)">6</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	function onInputClick() {
		// 调起自定义键盘
		document.getElementsByClassName('keys')[0].style.display = 'flex'
	}
        
	function onKeyClick(number) {
		const n_input = document.getElementsByClassName('input')[0];

		n_input.textContent += number
	}
</script>

CSS的奇思妙想（1） | 神奇的 div

我不是真的输入框，我只是一个div

解决方案

最后