javascript - 当用户在上面的输入 div 中键入文本并使其更高时,缩短 div 的高度

标签 javascript jquery html css

我有 2 个 div,并希望它们根据彼此的高度调整大小。当我在 Div1 的输入中输入文本时,它会增长。如果它长得比原始高度 40px 高,Div2 应该按 Div 增长的像素数缩小。例如,Div1 的起始高度为:40px,而 Div2 的起始高度为:100px。我输入长文本,Div1 增长到 60px,Div2 应该缩小 20px,高度为 80px。

在 Div 2 中输入内容不应影响 Div1 中的内容,因此我已将 Div2 设置为 overflow-y: auto

我该怎么做?这就是我所拥有的,但是 javascript 不工作。 var height = $('#inputText').height(); 一直返回 17.600(我真的不知道这个数字是什么意思,它不是 px)。 var height = document.getElementById('inputId').style.height; 始终返回原始 40px。即使 div 增长,这些数字也不会改变。当其中有 2 行文本时,如何获得新的高度?

抱歉这个冗长的问题,希望这是有道理的。谢谢。

html

<div class="div1"
    <input class="inputText" id="inputId" style="width: 230px; height: inherit">
</div>

<div class="editableContent" id="editorId" contentEditable="true" role="textbox"></div>

CSS

.relate {
   border-bottom: 1 px solid rgb(0, 0, 0);
   height: 40px
}

 .relate input.inputText {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0.5rem 0.5rem; 
  }

  .editableContent {
     display: block;
     width: 300px;
     height: 100px;
     overflow-y: auto;
     padding: 0.5rem 0.5rem;
  }

js

var height = $('#inputText').height();
if (height > document.getElementById('inputId').style.height) {
   document.getElementById('editorId').style.height -= height; 
}  

最佳答案

在您的高度定义中,您正在调用一个不存在的 id:

var height = $('.inputText').height();

or:

var height = $('#inputId').height();

关于javascript - 当用户在上面的输入 div 中键入文本并使其更高时,缩短 div 的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31900830/

相关文章:

Html/CSS : How to make a table stick to bottom of container, 同时让容器保持可滚动?

javascript - 将 .txt 而不是图像文件加载到 jquery 中

javascript - D3 折线图上的标签不起作用

javascript - tsconfig.json 与 Node.js 模块一起使用的最佳设置是什么?

javascript - jquery 模板显示无法读取未定义的属性 'push'

jquery - 哪种方式最好使用 IMG 标签和 CSS 背景图像进行游戏

javascript - aurelia-dialog modal 的 body 大小不正确

javascript - 如何在 Protractor 测试中访问 Angular 对象

javascript - 我如何只能产生 1 次随机值

javascript - 如果文本框突然有值,如何启用按钮