入力のあるサイトを作りました。
プレースホルダーとして機能するスパンがあるので、入力が選択されたときにアニメーション化できます。
入力を選択すると、予想どおり、プレースホルダー（スパン）が一番上に移動します。
ただし、プレースホルダースパンがなくなったため、ページの残りの部分は少し上にシフトします。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、ページのレイアウトからそれを削除し、それを上部の独自のフローティングレイヤーに配置するプレースホルダーを作成することです。
を使用するものはすべて、設定さposition:absoluteれた最初の親オブジェクトを参照することが重要ですposition:relative。そこでinputholder、このフローティングプレースホルダーのアンカーを作成しました。
以下でそれを行いましたが、位置を変更する必要がありました（絶対位置でも計算を行う必要はありません）。
@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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加