Question

在发布前几周就已经决定，它们喜欢下划线而不是方框的输入控件的现代外观，并且标签在输入焦点时会滑开。

>

此页面演示了效果： https://material.angularjs.org/latest/demo/input 点击名字以查看标签移动。

我的可重用组件如下：

<span 
    [ngClass]="styleClass" 
    class="wrapper">

    <label 
        [ngClass]="{'text-center': largeLabel, 'm-h-0': largeLabel}" 
        [attr.aria-labelledby]="id + '-label'">

        <span 
            [ngClass]="{'large-label': largeLabel}">
            {{ label }}
        </span>
    </label>

    <input 
        #element [value]="(isUppercase)?(textValue |uppercase): textValue" 
        (keyup)="onChange($event)" 
        (focusout)="executeAllTouchedFunctions(); 
        onChange($event)"
        [ngClass]="{'ng-invalid': !control?.valid && (control?.touched || control?.dirty) && !control.disabled, 'ng-dirty': control?.dirty, 'ng-touched': control?.touched}"
        [type]="type" 
        class="form-control" 
        [placeholder]="placeholder || ''" 
        [attr.aria-describedby]="(describedById) ? describedById : controlName?.name + '-described-by-id'"
        [name]="name" 
        [attr.aria-labelledby]="id + '-textField'" 
        [required]="isRequired" 
        [attr.maxlength]="maxlength" 
        [attr.aria-required]="isRequired"
        [disabled]="disabled" 
        (focus)="onFocus(e)" 
        [attr.aria-invalid]="!control?.valid && (control?.touched || control?.dirty)" />
</span>

据我所知，要影响标签，当输入具有焦点时，我将需要使用JavaScript（带有某种$（input）.parent（）。find（label））东西

我已经添加了onFocus（）事件，并且正在捕获该事件，但是不确定如何处理。

onFocus(event:FocusEvent) {
    console.log(FocusEvent);
}

这只是返回

“ FocusEvent（）{[本地代码]}”

我期望可以使用一些对象。我可以掌握DOM中的输入对象，以便找到它的关联标签吗？

还是我想得太多？

Answer 1

输入控件是下划线而不是框，当输入具有焦点时，标签会滑开。

这种输入字段的样式来自Google的Material Design系统。

Angular团队创建了Angular Material库，因此您不必自己实现这些组件。 Here's the documentation代表<mat-form-field>。

这只是返回

“ FocusEvent（）{[本地代码]}”

您正在记录构造函数FocusEvent，而不是您的event对象。如果将代码更改为console.log(event)，则应获得一个类似于以下内容的对象：

bubbles: false
cancelBubble: false
cancelable: false
composed: true
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
isTrusted: true
path: (9) [input.s-input.js-search-field., div.ps-relative, form#search.searchbar.js-searchbar, div.-container, header.top-bar.js-top-bar.top-bar__network._fixed, body.question-page.unified-theme, html.html__responsive, document, Window]
relatedTarget: null
returnValue: true
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: input.s-input.js-search-field.
target: input.s-input.js-search-field.
timeStamp: 100675.87499995716
type: "focus"
view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
which: 0

您可以以event.target的形式访问输入字段。

模拟角度奇特的输入

1 个答案: