MDL浮动标签文本框：点击按钮赋值时强制标签上浮的实现方法

出现该问题的根本原因是：MDL的浮动标签文本框组件的状态更新逻辑，仅会在用户手动和输入框交互时自动触发，直接通过JavaScript修改输入框的value属性无法触发组件的状态校验，所以标签不会上浮。

你可以直接调用MDL组件暴露的内置方法完成赋值+状态更新的操作，无需手动修改样式类，修改你的textbox.js代码即可：

function addText() {
    let searchBar = document.getElementById('search-bar');
    let text = 'New text';
    // 调用MDL文本框组件的change方法，自动完成赋值和标签状态更新
    searchBar.parentNode.MaterialTextfield.change(text);
}

如果需要手动控制状态，也可以在赋值后给文本框的父元素加上is-dirty类实现标签上浮，代码如下：

function addText() {
    let searchBar = document.getElementById('search-bar');
    let text = 'New text';
    searchBar.value = text;
    // 手动添加上浮需要的样式类
    searchBar.parentNode.classList.add('is-dirty');
}

两种方案都可以实现需求，优先推荐第一种内置方法的方案，会自动处理更多边界情况（比如赋值为空时自动让标签回落）。

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