0

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

目前，我的输入如下所示：

mat-form-field 输入占位符

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

mat-form-field 输入值

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

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;
            }
          }
        }
      }
4

2 回答 2

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

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

于 2020-12-22T13:52:44.143 回答
0

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

于 2020-12-22T13:57:42.323 回答