Java-elemental2中如何获取input输入框的实时输入值？

使用Java-elemental2开发时完全可以像原生JavaScript一样读取input输入框的实时取值。

问题根因 #

你当前使用getAttribute("value")无法获取实时输入内容的原因和原生JS逻辑完全一致：

• getAttribute("value")读取的是HTML标签上声明的初始value属性，只会返回元素渲染时写在标签上的默认值，不会同步用户后续输入的内容
• 用户输入的实时内容存储在DOM元素实例的value属性上，而非HTML属性上

可行实现 #

修改onAddTask方法，将获取到的元素强转为HTMLInputElement类型后，直接读取实例上的value属性即可拿到实时输入值：

public static void onAddTask() {
    HTMLInputElement taskInput = (HTMLInputElement) document.getElementById("tasks-input");
    alert(taskInput.value);
}

可选优化 #

不需要每次点击按钮都通过id查询DOM，可以在创建input元素时就持有实例引用，点击时直接读取value，减少DOM查询开销：

// 类中新增静态变量持有input实例
private static HTMLInputElement taskInput;

public static HTMLInputElement addInput() {
    taskInput = (HTMLInputElement) document.createElement("input");
    taskInput.placeholder = "Enter your name here";
    taskInput.id = "tasks-input";
    return taskInput;
}

public static void onAddTask() {
    alert(taskInput.value);
}

内容的提问来源于stack exchange，提问作者marincean adrian