时间戳

首页 > 解决方案 > Css输入HTML，为什么更新宽度时绝对位置会改变

html - Css输入HTML，为什么更新宽度时绝对位置会改变

问题描述

为什么输入元素的位置在改变keyup，在我css已经将 div 设置为position:absolute并且只改变widthonkeyup函数，我只想要width改变的输入不包括位置

$('.test').keydown(function(){
 var contents = $(this).val();
 var charlength = contents.length;
 newwidth =  charlength*9;
 $(this).css({width:newwidth});
});
#parent {
    position: relative;
    width: 400px;
}
  #parent div {
      position: absolute;
      left: 5px;
      right: 5px;
    top:300px;
  }
    #parent div input {
        position: relative;
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        width: 100%;
    }
<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="parent">
    <div class='yyy'><input class='test' type="text" value='jjjj'></div>
</div>
</body>
</html>

标签： htmlcss

解决方案

这是因为transform: rotate(...)默认情况下该属性会围绕其中心旋转元素。更改元素的宽度会使其中心移动，因此转换后的元素似乎会更改位置。为了防止它，改变transform-origin元素的，例如到它的左上角（0 0）：

$('.test').keydown(function(){
 var contents = $(this).val();
 var charlength = contents.length;
 newwidth =  charlength*9;
 $(this).css({width:newwidth});
});
#parent {
    position: relative;
    width: 400px;
}
  #parent div {
      position: absolute;
      left: 5px;
      right: 5px;
    top:300px;
  }
    #parent div input {
        position: relative;
  /* and please use the standard CSS instead of old prefixed junk! */
        transform: rotate(-90deg);
        transform-origin: 0 0;
        width: 100%;
    }
<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="parent">
    <div class='yyy'><input class='test' type="text" value='jjjj'></div>
</div>
</body>
</html>

PS 请使用标准的无前缀 CSS 属性（transform等），而不是他们古老的实验性前缀版本！不支持标准语法的浏览器实际上已经灭绝多年。如果您确实需要，您可以使用 Autoprefixer 等自动工具来仅生成您的受众真正需要的前缀。

推荐阅读