gpt4 book ai didi

jquery - 如何使输入下的所有内容都具有静态位置?

转载 作者:太空宇宙 更新时间:2023-11-04 00:56:51 26 4
gpt4 key购买 nike

我制作了一个带有输入的网站。
我有一个用作占位符的跨度,因此我可以在选择输入时为其设置动画。
当您选择输入时,占位符(跨度)移动到顶部,如预期的那样。
但是页面的其余部分会向上移动一点,因为占位符跨度消失了。我无法为占位符添加更大的边距,即使它是 5000px,边距也不起作用。

如何使页面的其余部分静态化/使页边距起作用?

我的代码(请全屏查看正确的文本移动,否则顶部会移动):

@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');

#content {
width: 80%;

padding-top: 57px;
padding-bottom: 50px;

border: 1px solid #DADCE0;
border-radius: 10px;
}


.center {
text-align: center;
}


h1 {
margin-top: 20px;

font-family: 'Raleway', sans-serif;
font-size: 25px;
font-weight: 500;

color: #202124;
}

h2 {
font-family: 'Raleway', sans-serif;
font-size: 17px;
font-weight: 500;
color: #202124;`enter code here`
}

input {
width: 82%;
margin-top: 28px;
padding: 20px 15px;

border: 1px solid #DADCE0;
border-radius: 5px;
}
input:focus {
outline: none !important;
border: 2px solid #1A73E8;
margin-bottom: -2px;
}

.placeholder {
position: relative;

left: calc(9% - 3px);
top: -37px;

padding: 0 8px;
margin-left: 12px;

background-color: white;

font-family: 'Raleway', sans-serif;
font-size: 17px;
font-weight: 500;
color: rgba(32, 33, 36, 0.60);

-webkit-transition: top 0.2s, font-size 0.2s; /* Safari 3.1 to 6.0 */
transition: top 0.2s, font-size 0.2s;
}
.placeholder-moved {
top: -63px;
font-size: 12px;
color: #1A73E8;
cursor: default;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<html>

<body>


<div id="content">

<div class="center"><img src="assets/logo.png" alt="Logo" width="78px;"></div>

<div class="center"><h1>Hey</h1></div>
<div class="center"><h2>Hey there</h2></div>




<div class="center"><input id="input1" type="text"></div>

<span class="placeholder" id="placeholder1">Placeholder</span>

<script>
$("#input1").focusin(function() {
$("#placeholder1").addClass("placeholder-moved");
});
$("#input1").focusout(function() {
$("#placeholder1").removeClass("placeholder-moved");
});

$("#placeholder1").click(function() {
$("#input1").focus();
});
</script>


<br>

This text moves


</div>


</body>

</html>

最佳答案

您需要一个围绕您的输入和占位符的 div。您的问题源于使用 position:relative ,它使占位符成为页面的一部分,能够影响其下方内容的定位。更好的解决方案是让您的占位符 position:absolute 将其从页面布局中移除,并将其放入顶部自己的 float 层中。

重要的是,任何具有 position:absolute 的对象都将自己引用到其第一个设置了 position:relative 的父对象。所以我将 inputholder 作为这个 float 占位符的 anchor 。

我已经在下面完成了,但我必须对您的定位进行一些修改(现在也不需要使用绝对定位进行计算)。

@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');

#content {
width: 80%;

padding-top: 57px;
padding-bottom: 50px;

border: 1px solid #DADCE0;
border-radius: 10px;
}


.center {
text-align: center;
}


h1 {
margin-top: 20px;

font-family: 'Raleway', sans-serif;
font-size: 25px;
font-weight: 500;

color: #202124;
}

h2 {
font-family: 'Raleway', sans-serif;
font-size: 17px;
font-weight: 500;
color: #202124;`enter code here`
}

.inputholder
{
width: 82%;
margin: 28px auto 0;
position: relative;
}

input {

padding: 20px 15px;
width: 100%;
border: 1px solid #DADCE0;
border-radius: 5px;
}
input:focus {
outline: none !important;
border: 2px solid #1A73E8;
margin-bottom: -2px;
}

.placeholder {
position: absolute;

left: 0;
top: 20px;

padding: 0 8px;
margin-left: 12px;

background-color: white;

font-family: 'Raleway', sans-serif;
font-size: 17px;
font-weight: 500;
color: rgba(32, 33, 36, 0.60);

-webkit-transition: top 0.2s, font-size 0.2s; /* Safari 3.1 to 6.0 */
transition: top 0.2s, font-size 0.2s;
}
.placeholder-moved {
top: -4px;
font-size: 12px;
color: #1A73E8;
cursor: default;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<html>

<body>


<div id="content">

<div class="center"><img src="assets/logo.png" alt="Logo" width="78px;"></div>

<div class="center"><h1>Hey</h1></div>
<div class="center"><h2>Hey there</h2></div>




<div class="inputholder" >
<input id="input1" type="text">
<span class="placeholder" id="placeholder1">Placeholder</span>
</div>

<script>
$("#input1").focusin(function() {
$("#placeholder1").addClass("placeholder-moved");
});
$("#input1").focusout(function() {
$("#placeholder1").removeClass("placeholder-moved");
});

$("#placeholder1").click(function() {
$("#input1").focus();
});
</script>


<br>

This text moves


</div>


</body>

</html>

关于jquery - 如何使输入下的所有内容都具有静态位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54496143/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com