如何将字母间距添加到输入值而不是输入占位符 (Angular 11)

Question

我的 Angular 项目中有一个 mat-form-field，我需要在其中为输入值而不是输入占位符添加字母间距。

目前，我的输入是这样的：

当用户在输入中输入内容时，它看起来像这样：

我想要的是输入占位符看起来像这样（没有任何字母间距），但同时保持输入值的字母间距：

有什么可行的方法吗？

这是我的 HTML:

    <mat-form-field
      id="mobileNumber"
      appearance="outline"
    >
      <span matSuffix>+98</span>
      <input
        type="text"
        matInput
        name="mobileNumber"
        formControlName="mobileNumber"
        placeholder="Mobile Number"
      />
    </mat-form-field>

这是我的 SCSS:

     mat-form-field#mobileNumber {
        width: 70%;

        ::ng-deep .mat-form-field-wrapper,
        .mat-form-field-wrapper {
          ::ng-deep .mat-form-field-infix {
            direction: ltr;
            text-align: center;

            ::ng-deep input {
              letter-spacing: 8px;
            }
          }
        }
      }

Answer 1

::placeholder /* Chrome, Firefox, Opera, Safari 10.1+ */
:-ms-input-placeholder /* Internet Explorer 10-11 */
::-ms-input-placeholder /* Microsoft Edge */

有了这个，您可以设置占位符的样式

Answer 2

使用 ::placeholder 修饰符访问输入的占位符。

如何将字母间距添加到输入值而不是输入占位符 (Angular 11)

How to add letter-spacing to input value but not to input placeholder (Angular 11)

css

input

sass

angular

mat-form-field