我的网站上有一个表单,出于某种原因,有一些空间在单击它们后会自动聚焦到第二列中的字段。我试图找到任何可能导致它但没有运气的元素。我从未见过这样的行为。
你可以在这里看到表格:不再存在
任何帮助都会很好。
如果你需要看css我可以提供一个sass版本:
@keyframes input-underline {
0% {
left: 0;
right: 0;
}
50% {
left: 0;
right: 100%;
background: #ccc;
}
51% {
background: $secondary-color;
}
100% {
background: $secondary-color;
left: 0;
right: 0;
}
}
.contact {
form {
display: block;
max-width: 100%;
label {
position: relative;
display: block;
width: 100%;
&::before {
position: absolute;
content: '';
bottom: 0;
height: 2px;
left: 0;
right: 0;
transition: background .6s linear;
background: #ccc;
}
&.active {
&::before {
animation: input-underline .6s linear forwards;
background: #ccc;
}
.input-label {
top: -16px;
font-size: .925rem;
}
}
.input-label {
position: absolute;
top: 7px;
left: 0;
transition: top .15s linear, font-size .15s linear;
z-index: -1;
}
}
.input {
display: block;
background: transparent;
width: 100%;
padding: 10px 0;
border: none;
font-family: inherit;
font-weight: $global-weight-light;
&.textarea {
min-height: auto;
height: 38px;
max-width: 100%;
max-height: 154px;
resize: none;
overflow-x: hidden;
}
}
.select, .submit {
appearance: none;
}
.submit {
display: block;
border: none;
width: 100%;
max-width: 260px;
margin: 0 auto;
padding: 10px 0;
border-radius: 4px;
box-shadow: 0 0 2px 0 #1d1d1b;
background: $secondary-color;
color: $white;
cursor: pointer;
}
}
}
完整代码在这里:不再存在
此处的 JS 代码:不再存在
编辑:我使用 ZURB 基金会,以防它很重要。 编辑:提供的链接不再有效,所以我删除了它们。
最佳答案
我建议您将所有的 <div class="row">
包裹起来在<div class="table">
.
然后使用这个 CSS:
.table{
display:table;
}
.row{
display:table-row;
}
.row div{
display:table-cell;
}
并摆脱:
.row::before,
.row::after {
display: table;
content: ' ';
}
关于jquery - HTML/CSS 输入焦点超出范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44605273/