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

问题描述

我的 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;
            }
          }
        }
      }

解决方法

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

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

,

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