Vaadin 14 如何设置textarea最大行数且超出行数时禁止继续输入

要实现超出最大行数后禁止输入、无滚动条的效果，核心是通过客户端监听输入前事件，实时判断内容渲染高度是否超出设定的最大高度，溢出时直接拦截输入操作，避免仅用maxLength无法适配换行计数的问题。

完整实现代码 #

import com.vaadin.flow.component.textfield.TextArea;

// 初始化TextArea
TextArea textArea = new TextArea();
// 自定义最大行数
int maxLines = 5;
// 每行高度，可根据项目样式调整，单位px
int lineHeight = 24;

// 设置基础样式，禁止滚动、禁止拖拽修改尺寸
textArea.getStyle()
    .set("line-height", lineHeight + "px")
    .set("max-height", (maxLines * lineHeight) + "px")
    .set("overflow", "hidden")
    .set("resize", "none");

// 绑定客户端输入拦截逻辑
textArea.getElement().executeJs(
    "this.addEventListener('beforeinput', (e) => {" +
    "  const prevValue = this.value;" +
    "  const start = this.selectionStart;" +
    "  const end = this.selectionEnd;" +
    // 临时修改overflow属性获取真实内容高度
    "  this.style.overflow = 'auto';" +
    // 模拟输入后的内容
    "  const testValue = e.data ? prevValue.slice(0, start) + e.data + prevValue.slice(end) : prevValue;" +
    "  this.value = testValue;" +
    // 判断是否超出最大高度
    "  const isOverflow = this.scrollHeight > this.clientHeight;" +
    // 恢复原有内容和样式
    "  this.value = prevValue;" +
    "  this.style.overflow = 'hidden';" +
    "  if (isOverflow) {" +
    "    e.preventDefault();" +
    "  }" +
    "});"
);

效果示例 #

注意事项 #

• 代码中的行高数值需要和项目全局文本样式保持统一，避免高度计算偏差
• 该方案同时兼容手动输入换行、文本过长自动换行两种溢出场景，不需要单独统计换行符数量
• 如需给用户溢出提示，可在拦截输入的逻辑中额外添加通知触发代码

内容的提问来源于stack exchange，提问作者Miłosz Bąbliński