Question

我已经创建了一个基本的可扩展区域，单击一个复选框会显示一个嵌入式文本框。再次单击该复选框以取消选中该文本框，然后将其隐藏。这可以按预期工作，并且在桌面视图上没有错误。但是，在移动设备上，如果您单击复选框，然后单击文本框以输入一些文本，它将在复选框上单击以将其读取，因此该文本框将被隐藏，但会接受输入。

我认为这是由于文本框是checkbox元素的子元素，但是我不确定如何防止这种情况的发生。我生了一个小孩，以确保可以根据复选框的状态通过css来显示和隐藏它，而不用JavaScript来管理页面上的许多内容。

* { transition: 0.2s all linear; }
html, body {
	margin: 0;
	height: 100%;
	color: #fff;
	background-color: #333;
	background-image: linear-gradient(45deg, #333, #999);
	background-image: -webkit-linear-gradient(45deg, #333, #999);
	overflow: hidden;
}
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.container {
  height: 100%;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.textbox {
	position: relative;
	margin-top: 25px;
	display: flex;
	width: 100%;
	z-index: 200;
}
.placeholder {
	position: absolute;
	left: 5px;
	bottom: 0;
	font-size: 20px;
	color: #ddd;
	z-index: 201;
}
.textbox input[type=text] {
	position: relative;
	flex: 1;
	padding: 5px;
	line-height: 20px;
	font-size: 20px;
	border: none;
	border-radius: 0;
	border-bottom: 2px solid #0af;
	color: #fff;
	background-color: rgba(255, 255, 255, 0);
	z-index: 202;
}
.textbox input[type=text]:hover {
	background-color: rgba(0, 0, 0, 0.075);
}
.textbox input[type=text]:focus {
	outline-width: 0;
	background-color: rgba(0, 0, 0, 0.075);
}
.textbox input[type=text]:focus + .placeholder,
.textbox input[type=text]:valid + .placeholder {
	font-size: 15px;
	top: -25px;
	color: #0af;
}
.textbox.invalid > input[type=text] + .placeholder { color: #f33; }
.textbox.invalid input[type=text] { border-bottom: 2px solid #f33; }
@media only screen and (max-width: 500px) {
	.textbox input[type=text] { font-size: 8vw; }
	.textbox .placeholder { font-size: 6vw !important; }
}

.checkbox {
	position: relative;
	display: block;
	cursor: pointer;
	padding: 10px;
	padding-left: 40px;
}
.checkbox > input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}
.checkbox.disabled {
	color: #999;
	cursor: default;
}
.checkbox.disabled > .checkmark {
	background-color: rgba(0, 0, 0, 0.25);
	border: 1px solid #999;
}
.checkbox > input:checked + .checkmark {
	background-color: #0af;
	border: 1px solid #0af;
}
.checkbox:not(.disabled):hover { color: #0af; }
.checkbox:not(.disabled):hover > .checkmark { border: 1px solid #0af; }
.checkmark {
	position: absolute;
	top: 8px;
	left: 10px;
	width: 25px;
	height: 25px;
	border: 1px solid #999;
}
.checkmark:after {
	position: absolute;
	top: 1px;
	left: 7px;
	width: 7px;
	height: 15px;
	border: solid white;
  	border-width: 0 3px 3px 0;
  	-webkit-transform: rotate(45deg);
  	-ms-transform: rotate(45deg);
  	transform: rotate(45deg);
	display: none;
	content: "";
	animation: build-checkmark 0.2s;
}
.checkbox input:checked + .checkmark:after {
	display: block;
}
@keyframes build-checkmark {
	0% {
		width: 0px;
		height: 0px;
	}
	100% {
		width: 7px;
		height: 15px;
	}
}

.expandable-checkbox-region {
	display: none;
	margin-top: 10px;
}
.checkbox > input:checked ~ .expandable-checkbox-region {
	display: block;
}

<div class="container">
	<label class="checkbox">12345678
		<input type="checkbox"/>
		<span class="checkmark"></span>
		<div class="expandable-checkbox-region">
			<div class="textbox">
					<input type="text" required />
					<label class="placeholder">Field Name</label>
			</div>
      <div class="textbox">
					<input type="text" required />
					<label class="placeholder">Field Name</label>
			</div>
		</div>
	</label>
</div>

是否有一种方法可以确保在不使用JavaScript的情况下在移动视图上展开/折叠就可以在移动视图上正常工作？

复制步骤：

台式机
1. 点击复选框
2. 点击文本框
3. 文本框不会隐藏。
移动
1. 点击复选框
2. 点击文本框
3. 文本框隐藏但不应该隐藏。

Answer 1

尝试添加<label for="#textbox">并将相应的id命名为<input id="textbox">到文本框中。这样，当您点击label时，它将使您的文本框处于活动状态。对于checkbox

同样

我认为这是由于文本框是checkbox元素的子元素，但是我不确定如何防止这种情况发生。

我认为事实并非如此，因为每个可编辑元素都有自己的onFocus事件，无论其父项还是子项。例如，如果单击#textbox，则应focus，而不是其父元素。

希望有帮助！

通过复选框显示/隐藏隐藏在手机上？

1 个答案: