为什么我的第二个 mdc-textfield 标签附加到我的第一个 mdc-textfield？

Question

我正在使用 MDC-Web（Material Design Components Web）处理 Laravel 视图，并且在标签未正确附加到它们各自的输入时遇到一些问题。

  <section class="mdc-card__supporting-text" style="flex-direction: row">

      <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
        <input id="lang" required onkeyup="return forceLower(this)"
          type="text" class="mdc-textfield__input"
          value="{{ $fontmap->lang }}"  aria-controls="lang-helptext">
        <label class="mdc-textfield__label mdc-textfield__label--float-above" for="lang">
          Language
        </label>
        <div class="mdc-textfield__bottom-line"></div>
      </div>
      <p id="lang-helptext" class="mdc-textfield-helptext" aria-hidden="true">
        Please use lowercase name for language.
        @if ($errors->has('lang'))
          <span style="color: red">
            {{ $errors->first('lang') }}
          </span>
        @endif
      </p>

      <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
        <input id="short" required type="text" onkeyup="return forceLower(this)"
          maxlength="2" size="2" class="mdc-textfield__input"
          value="{{ $fontmap->short }}"  aria-controls="short-helptext">
          <label class="mdc-textfield__label mdc-textfield__label--float-above" for="short">
            Short
          </label>
        <div class="mdc-textfield__bottom-line"></div>
      </div>
      <p id="short-helptext" class="mdc-textfield-helptext" aria-hidden="true">
        Please type in the two character lowercase ISO code for the langauge.
        <a href="https://www.loc.gov/standards/iso639-2/php/code_list.php" target="_blank">
          ISO 639-1 Chart
        </a>
        @if ($errors->has('short'))
          <span style="color: red">
            {{ $errors->first('short') }}
          </span>
        @endif
      </p>

我的 JavaScript 看起来像这样......

<script type="text/javascript">
  mdc.autoInit();
  mdc.textfield.MDCTextfield.attachTo(document.querySelector('.mdc-textfield'));
  function forceLower(strInput) {
    return strInput.value = strInput.value.toLowerCase();
  }
</script>

问题是第二个'short' mdc-textfield 附加到'lang' mdc-textfield 的底部。我希望将标签附加到正确的输入上，但我看不出我在哪里以及为什么会出现问题。

我的其他 mdc-textfield 布局都没有这个问题（我有几个可以正常工作的多字段 mdc-textfield 布局）。我怀疑错误很小而且很微妙，但是看了代码后找不到。

这和我的附加强制小写javascript函数有什么关系吗？

谢谢！

Answer 1

我能够通过再次重写 mdc-textfields 来修复它，从头开始，生成的代码是：

<section class="mdc-card__supporting-text" style="flex-direction: row">

  @if ($errors->any())
      <div class="alert alert-danger">
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div>
  @endif

  <input type="hidden" name="_method" value="PUT">

    <div class="mdc-textfield mdc-textfield--upgraded" data-mdc-auto-init="MDCTextfield" style="width: 100%">
      <input type="text" id="lang" name="lang" class="mdc-textfield__input" value="{{ $fontmap->lang }}"
      required onkeyup="return forceLower(this)" aria-controls="lang-helptext">
      <label class="mdc-textfield__label mdc-textfield__label--float-above" for="lang">
        Language Name
      </label>
      <div class="mdc-textfield__bottom-line"></div>
    </div>
    <p id="lang-helptext" class="mdc-textfield-helptext" aria-hidden="true">
      Please user lowercase name.
      @if ($errors->has('lang'))
        <span style="color: red">
          {{ $errors->first('lang') }}
        </span>
      @endif
    </p>

    <div class="mdc-textfield mdc-textfield--upgraded" data-mdc-auto-init="MDCTextfield" style="width: 100%">
      <input type="text" id="short" name="short" class="mdc-textfield__input" value="{{ $fontmap->short }}"
      required onkeyup="return forceLower(this)" aria-controls="short-helptext">
      <label class="mdc-textfield__label mdc-textfield__label--float-above" for="short">
        Code
      </label>
      <div class="mdc-textfield__bottom-line"></div>
    </div>
    <p id="short-helptext" class="mdc-textfield-helptext" aria-hidden="true">
      Please type in the two character lowercase ISO code for the langauge.
      <a href="https://www.loc.gov/standards/iso639-2/php/code_list.php" target="_blank">
        ISO 639-1 Chart
      </a>
      @if ($errors->has('short'))
        <span style="color: red">
          {{ $errors->first('short') }}
        </span>
      @endif
    </p>

我实际上不明白为什么它应该不同。对 JavaScript 的任何更改都没有做任何事情。我认为这可能是输入属性的顺序，但我无法确认，如果不是一些我还没有抓住的小细节。任何提供解释为什么它最初不起作用的其他答案都值得赞赏。谢谢！