Question

为什么输入元素的位置在我keyup的{{1}} css上变化，我已将div设置为position:absolute并仅更改width keyup } function，我只想要更改的width输入不包括位置

＆＃13;

$('.test').keydown(function(){
 var contents = $(this).val();
 var charlength = contents.length;
 newwidth =  charlength*9;
 $(this).css({width:newwidth});
});

＆＃13;

#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%;
    }

＆＃13;

<!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>

＆＃13;

Answer 1

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

＆＃13;

$('.test').keydown(function(){
 var contents = $(this).val();
 var charlength = contents.length;
 newwidth =  charlength*9;
 $(this).css({width:newwidth});
});

＆＃13;

#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%;
    }

＆＃13;

<!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>

＆＃13;

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

Css输入HTML，为什么更新宽度时绝对位置会发生变化

1 个答案: