MDC-Web：mdc-text-field--用预填充值概述答案

【问题标题】：MDC-Web: mdc-text-field--outlined with pre-filled valueMDC-Web：mdc-text-field--用预填充值概述
【发布时间】：2018-02-16 19:26:29
【问题描述】：

我正在预填充一些文本字段，但边框不可见。

例如，我正在使用以下 JavaScript 来预填充字段，但在单击/取消单击该字段之前不会呈现大纲。我试过了

var doc = document;
doc.getElementById("other-number-tf-ex-input").parentElement.classList.add("mdc-text-field--upgraded");
doc.getElementById("other-number-tf-ex-input").nextElementSibling.classList.add("mdc-text-field__label--float-above");
doc.getElementById("other-number-tf-ex-input").value = values[1].otherPhoneExtensionCode;
window.mdc.autoInit();

HTML 是：

<div class="account-telephone-outlined-wrapper">
    <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--dense tel-medium" data-mdc-auto-init="MDCTextField">
        <input required pattern="^[0-9]*$" type="text" id="cellular-number-tf-cc-input" class="mdc-text-field__input" aria-controls="cellular-number-tf-cc-message">
        <label for="cellular-number-tf-cc-input" class="mdc-text-field__label">1</label>
        <div class="mdc-text-field__outline">
            <svg>
                <path class="mdc-text-field__outline-path" d=""/>
            </svg>
        </div>
        <div class="mdc-text-field__idle-outline"></div>
    </div>
    <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="cellular-number-tf-cc-message">
        00000
    </p>
</div>

【问题讨论】：

标签： javascript material-components-web mdc-components

【解决方案1】：

您应该显式实例化一个 MDCTextField 对象，然后设置值：

var doc = document;

var field = new mdc.textField.MDCTextField(doc.getElementById("other-number-tf-ex-input-container"));
field.value = values[1].otherPhoneExtensionCode;

这仅适用于我并触发浮动标签。

注意other-number-tf-ex-input-container id：它必须指向容器mdc-text-field div。

【讨论】：

【解决方案2】：

我只设置了正常的禁用文本字段配置（禁用类和输入的禁用属性），而是以编程方式设置值，例如：

myMDCtextfield.value = "myvalue";

然后触发浮动标签:)

【讨论】：