如何在 hyperscript 中创建自动调整大小的文本区域

Question

我有一个固定宽度的文本区域，我想在文本换行或用户输入新行时使其垂直自动调整大小。

我知道如何在 javascript 中做到这一点，但我不知道如何让它在 hyperscript 中工作。

我就是这样开始的。我知道将 17 硬编码为行高（实际上是 2.5rem），将 10 硬编码为字符宽度是错误的，但我只是想让这个天真的东西先工作。

on keyup
    log Math.ceil((my value.length * 10) / my clientWidth) * 17
    set my.style.height to Math.ceil((my value.length * 10) / my clientWidth) * 17 

它记录了我所期望的内容，但它不会设置文本区域的高度。我也尝试过使用

*height

而不是

my.style.height

，但没有成功。给什么？

Answer 1

所以，事实证明我实际上只需要将高度格式化为末尾带有“px”的字符串，而不仅仅是一个数字。

set my.style.height to (...).toString() + "px"

这是我最终计算出所有内容的完整脚本。

set :lineHeight to parseInt(window.getComputedStyle(me, null).getPropertyValue('line-height'))
set :paddingRight to parseInt(window.getComputedStyle(me, null).getPropertyValue('padding-right'))
set :paddingLeft to parseInt(window.getComputedStyle(me, null).getPropertyValue('padding-left'))
set :font to window.getComputedStyle(me, null).getPropertyValue('font')
on keyup
    make an <canvas/> called canvas
    set context to canvas.getContext("2d")
    set context.font to :font
    set textWidth to context.measureText(my value).width
    set areaWidth to (my clientWidth - :paddingRight - :paddingLeft)
    set calculatedHeight to Math.ceil(textWidth / areaWidth) * :lineHeight
    set my.style.height to calculatedHeight.toString() + "px"

只有当我们假设文本区域的行高、右内边距、左内边距和字体在加载后不会改变时，这才有效，这是我愿意做的假设。