如何为Vaadin ComboBox的底层输入元素设置maxLength属性

要给Vaadin ComboBox的自定义输入框添加maxLength属性，你需要定位到组件内部的底层<input>元素，而非外层的vaadin-combo-box元素。具体实现方式如下：

• 通过附加事件监听获取内部元素
  组件只有附加到DOM树后，内部的子元素才会被渲染出来，因此需要在attach事件中查询底层输入元素：

  ComboBox<String> comboBox = new ComboBox<>();
  comboBox.addAttachListener(event -> {
      // 精准定位内部输入元素
      Element inputElement = comboBox.getElement().querySelector("input[slot='input']");
      if (inputElement != null) {
          inputElement.setAttribute("maxLength", "30");
      }
  });
  

• 自定义ComboBox子类实现
  如果你需要复用这个逻辑，可以创建自定义ComboBox子类，在onAttach方法中处理：

  public class LengthLimitedComboBox<T> extends ComboBox<T> {
      private int maxLength;
  
      public LengthLimitedComboBox(int maxLength) {
          this.maxLength = maxLength;
      }
  
      @Override
      protected void onAttach(AttachEvent attachEvent) {
          super.onAttach(attachEvent);
          Element inputElement = getElement().querySelector("input[slot='input']");
          if (inputElement != null) {
              inputElement.setAttribute("maxLength", String.valueOf(maxLength));
          }
      }
  }
  

这样设置后，用户在ComboBox中输入自定义值时，输入长度就会被限制为指定的30字符。

内容的提问来源于stack exchange，提问作者Giuseppe Manzo