上移的输入框

Posted TTTK

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上移的输入框相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
  .box{
    width:200px;
    height:30px;
    border:1px solid #aaa;
    position: relative;
    border-radius: 5px;
  }
  input{
    height:30px;
    width:100%;
    border-radius: 5px;
  }
  span{
    position:absolute;
    top:10px;
    left:10px;
    background: pink;
    transition: all 0.5s ease-in;
    background: pink;
  }
</style>
</head>
<body>
<div class="box">
  <span>姓名:</span>
  <input type="text">
</div>
</body>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
  $(function(){
    $(‘input‘).focus(function(){
      $(‘span‘).css(‘top‘,‘-10px‘);
    });
    $(‘input‘).blur(function(){
　　　　if($(‘input‘).val()=="){
　　　　　　$(‘span‘).css(‘top‘,‘10px‘);
　　　　　　}
　　　　else{
　　　　$(‘span‘).css(‘top‘,‘-10px‘);
　　　　}
    })
})
//原生

<script>
window.onload = function(){
var oInput = document.querySelector(‘input‘);
var oSpan = document.querySelector(‘span‘);
oInput.onfocus = function(){
oSpan.style.top = -10 + ‘px‘;
};
oInput.onblur = function(){
if(oInput.value == ""){
console.log(‘我的内容为空‘);
oSpan.style.top = 10 + ‘px‘;
}else{
oSpan.style.top = -10 + ‘px‘;
};
};
}
</script>

 
</script>
</html>

 

以上是关于上移的输入框的主要内容，如果未能解决你的问题，请参考以下文章

点击或鼠标上移会在输入框上方显示白框

移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

[Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出（点击输入框）时，页面不上移，导致输入框被键盘遮挡 的解决办法

移动端登录页面input获取焦点后页面布局及输入框上移的问题

微信小程序键盘拉起后页面上移问题

iOS-当输入框被键盘遮挡时让整个view上移