Question

我输入了一个网站。
我有充当占位符，从而选择输入时，我可以动画它的跨度。
选择输入后，占位符（跨度）将像预期的那样移动到顶部。
但是，由于占位符范围已消失，因此页面的其余部分将向上移动一点。我不能为占位符添加更大的边距，即使它是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>

Answer 1

在input元素内添加了span字段和div，将div的高度设置为100px

$("#input1").focusin(function() {
  $("#placeholder1").addClass("placeholder-moved");
});
$("#input1").focusout(function() {
  if($("#input1").val()==""){
   $("#placeholder1").removeClass("placeholder-moved");
  }
});

$("#placeholder1").click(function() {
  $("#input1").focus();
});

    @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 style="height:100px">
        			<div class="center"><input id="input1" type="text"></div>
    
        			<span class="placeholder" id="placeholder1">Placeholder</span>
               </div>
<br/>

		This text moves

Answer 2

您需要周围的输入，并占位符一个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>

如何使输入下的所有内容都处于静态位置？

2 个答案: