Question

我正在尝试使用材料设计组件创建一个简单的表单，并且无法正常工作。当我开始输入详细信息时，占位符没有被移除，我该怎么做，我也尝试使用填充的，但也我无法删除后台占位符，这是我尝试过的代码，并且我已经添加了此https://material.io/develop/web/docs/getting-started

所需的所有材料库

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #get-started {
        background-color: #9e0b0f;
        border: 0;
        border-radius: 0;
        font-family: "NewsGothicBold", san-serif !important;
        text-transform: uppercase;
        margin: auto;
        display: block;
        padding: 10px 22px 5px 25px;
        font-size: 18px;
        font-weight: normal;
        margin-top: 20px;
      }

      .forms {
        font-family: "NewsGothicBold", san-serf;
        width: 390px;
        margin: 20px auto 0;
        box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
        padding: 0 0 40px;
        border-radius: 8px;
        color: #555;
        background-color: #fff;
      }

      .username,
      .password {
        display: flex;
        margin: 20px auto;
        width: 300px;
      }
      .mdc-text-field {
        width: 350px;
        margin-top: 20px;
        margin-left: 20px;
      }
      .mdc-select {
        width: 350px;
        margin-top: 20px;
        margin-left: 20px;
      }

      @media (max-width: 450px) {
        .forms {
          font-family: "NewsGothicBold", san-serf;
          width: 330px;
          margin-top: 20px !important;
          margin: 0 auto;
          box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
          padding: 0 0 40px;
          border-radius: 8px;
          color: #555;
          background-color: #fff;
        }
        .mdc-text-field {
          width: 290px;
          margin-top: 20px;
          margin-left: 20px;
        }
        .mdc-select {
          width: 290px;
          margin-top: 20px;
          margin-left: 20px;
        }
      }
      
              </style>
  </head>
  <body>
    <div class="forms">
      <form>
        <label class="mdc-text-field mdc-text-field--outlined">
          <span class="mdc-notched-outline">
            <span class="mdc-notched-outline__leading"></span>
            <span class="mdc-notched-outline__notch">
              <span class="mdc-floating-label" id="my-label-id">Your Name</span>
            </span>
            <span class="mdc-notched-outline__trailing"></span>
          </span>
          <input
            type="text"
            class="mdc-text-field__input"
            aria-labelledby="my-label-id"
          />
        </label>
        <label class="mdc-text-field mdc-text-field--outlined">
          <span class="mdc-notched-outline">
            <span class="mdc-notched-outline__leading"></span>
            <span class="mdc-notched-outline__notch">
              <span class="mdc-floating-label" id="my-label-id"
                >Your EMAIL</span
              >
            </span>
            <span class="mdc-notched-outline__trailing"></span>
          </span>
          <input
            type="text"
            class="mdc-text-field__input"
            aria-labelledby="my-label-id"
          />
        </label>

        <button class="mdc-button mdc-button--raised mt-10" id="get-started">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">DOWNLOAD YOUR GUIDE</span>
        </button>
      </form>
    </div>
  </body>
</html>

Answer 1

您好，我尝试使用您的代码，看起来输入在前面，占位符在后面。如果您仍然不了解我。像这样删除输入中的类：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <style>
      #get-started {
        background-color: #9e0b0f;
        border: 0;
        border-radius: 0;
        font-family: "NewsGothicBold", san-serif !important;
        text-transform: uppercase;
        margin: auto;
        display: block;
        padding: 10px 22px 5px 25px;
        font-size: 18px;
        font-weight: normal;
        margin-top: 20px;
      }

      .forms {
        font-family: "NewsGothicBold", san-serf;
        width: 390px;
        margin: 20px auto 0;
        box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
        padding: 0 0 40px;
        border-radius: 8px;
        color: #555;
        background-color: #fff;
      }
      input[type="text"] {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        height: 46px;
        border: 1px solid rgb(172, 172, 172);
        border-radius: 4px;
      }
      .mdc-text-field--outlined {
        height: 56px;
        overflow: visible;
      }

      .username,
      .password {
        display: flex;
        margin: 20px auto;
        width: 300px;
      }
      .mdc-text-field {
        width: 350px;
        margin-top: 20px;
        margin-left: 20px;
      }
      .mdc-select {
        width: 350px;
        margin-top: 20px;
        margin-left: 20px;
      }

      @media (max-width: 450px) {
        .forms {
          font-family: "NewsGothicBold", san-serf;
          width: 330px;
          margin-top: 20px !important;
          margin: 0 auto;
          box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
          padding: 0 0 40px;
          border-radius: 8px;
          color: #555;
          background-color: #fff;
        }
        .mdc-text-field {
          width: 290px;
          margin-top: 20px;
          margin-left: 20px;
        }
        .mdc-select {
          width: 290px;
          margin-top: 20px;
          margin-left: 20px;
        }
      }
    </style>
  </head>
  <body>
    <div class="forms">
      <form>
        <label class="mdc-text-field mdc-text-field--outlined">
          <input
            type="text"
            placeholder="Your Name"
            aria-labelledby="my-label-id"
          />
        </label>
        <label class="mdc-text-field mdc-text-field--outlined">
          <input
            type="text"
            placeholder="Your Name"
            aria-labelledby="my-label-id"
          />
        </label>

        <button class="mdc-button mdc-button--raised mt-10" id="get-started">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">DOWNLOAD YOUR GUIDE</span>
        </button>
      </form>
    </div>
  </body>
</html>

所以我认为您必须使用其他表单设计。或者像这样的代码：

import { Component, OnInit } from '@angular/core';
import * as disk from 'diskusage';

@Component({
  selector: 'app-disk',
  templateUrl: './disk.component.html',
  styleUrls: ['./disk.component.css']
})
export class DiskComponent implements OnInit {

  getDiskUsage() {
    disk.check("/", function(err, result) {
      if(err) {
        console.log(err);
      } else {
        console.log(result.available);
        console.log(result.free);
        console.log(result.total);
      }
    })
  }

  constructor() {
    
  }

  ngOnInit(): void { }

}

让我知道我是否有帮助，祝你好运。保重???!!!

如何从材料设计概述文本字段中删除占位符

1 个答案: