我正在做一个＆＃34;流畅的＆＃34; textarea，根据它的内容调整它的高度。我实际上是在尝试实施this脚本。我有以下代码：https://ellie-app.com/Vjtvm6yrKWa1/4
问题是，当增加时，它没有问题，但是当试图降低高度时，它没有按预期工作。
如何重现问题：
我认为它与虚假的dom相关，阻止了scrollHeight的改变，比如缓存（性能方面），但它只是猜测。
可能是我的问题？
Ps。 在尝试使用其他类型的活动时，例如＆＃34;输入＆＃34;或者＆＃34;更改＆＃34;，也会发生此问题。
答案 0 :(得分：2)
编辑4/20 ：与此相关的Slack频道上的ilias：https://ellie-app.com/H5x9DC4J9ba1/0（纯Elm自动扩展文字区域的Ellie）
=====
我怀疑这是解码器的问题。
请注意，在JS示例中，当textarea内容发生更改时，会执行2项操作以获取新高度：
- 将textarea..height设置为auto
- 得到textarea..scrollHeight。
如果没有首先设置为auto JS示例，也会展示您在Elm示例中看到的行为。
现在注意Elm示例中的事件序列：
1--删除一些文字行
2--单击textarea;这会计算当前高度（在将高度设置为auto之前）
3-- ...然后发送HeightChange
4-- ...从第2步发送AutoHeight，然后UpdateHeight发送旧高度
因此，我再次怀疑这是一个解码器的问题。要查看，请参阅以下内容（快速/脏）Ellie - 它会在auto和计算出的高度之间切换高度，您会看到每隔一次点击计算正确的高度：https://ellie-app.com/WwBDfDvhypa1/0
（旁白：榆树可以合并为同一动画帧排队的值，dunno没有看源，但这仍然不在这里。）
答案 1 :(得分：1)
我已经检查了代码，问题似乎与activeProducts解码器有关。每次点击 - ，它只会将值减少2 px 。例如：var activeProducts = _context.Products.Where(p => !p.IsDeleted);
if (!string.IsNullOrEmpty(searchTerm))
{
if (searchType == "category")
{
// See the change here?
activeProducts = activeProducts
.Where(p => string.Equals(
p.Category.Name,
searchTerm.Trim(),
StringComparison.CurrentCultureIgnoreCase))
.OrderBy(p => p.Category.Name)
.Skip(_recordsPerPage * (page - 1))
.Take(_recordsPerPage);
}
else
{
// Here.
activeProducts = activeProducts
.Where(p => string.Equals(
p.Brand.Name,
searchTerm.Trim(),
StringComparison.CurrentCultureIgnoreCase))
.Skip(_recordsPerPage * (page - 1))
.Take(_recordsPerPage);
}
}
else
{
// And here.
activeProducts = activeProducts
.Skip(_recordsPerPage * (page - 1))
.Take(_recordsPerPage);
}
..等等。不是真正的价值。
我不知道为什么，找不到有关此问题的任何文档 - 但您可以使用scrollHeight提供几乎相同的功能。这是您需要的功能：
424, 422, 420此处使用Map2确保同时成功解码keypress event和whenBackspacePressed_ReceiveScrollHeight : (Int -> msg) -> Attribute msg
whenBackspacePressed_ReceiveScrollHeight tagger =
let
isBackspace code =
if code == 8 then
Decode.succeed "Backspace pressed"
else
Decode.fail "is not Backspace - is this error shown anywhere?!"
decode_Backspace =
Decode.andThen isBackspace Html.Events.keyCode
in
Html.Events.on "keypress" (Decode.map2 (\key scrollHeightValue-> tagger scrollHeightValue) decode_Backspace targetHeight)
。
在视图中添加此事件：
isBackspace按住退格键时可以正常工作。但不是你想要的方式，check it out here: ellie.app ..