Question

我在项目中使用Angular Material。在该项目中，我有一个使用autocomplete组件的表单。一切都运行良好 - 但是，我想在用户聚焦输入元素时添加占位符文本。

这是我的html模板：

<input type="search" matInput placeholder="My Placeholder"
     aria-label="My Placeholder"
     [matAutocomplete]="mySearch"
     [formControl]="myCtrl"
     (focus)="onInputFocus()"
     [(ngModel)]="myModel">

在我的.ts文件中，我有这个方法：

public onInputFocus(event: Event): void {
    // do stuff
}

Angular Material使用占位符属性并在运行时将其转换为label元素。我希望实际的占位符属性能说出除“我的占位符”之外的其他内容。

例如，如果用户点击输入，“我的占位符”会向上移动，“搜索”字样会显示为占位符文字。

我考虑过使用css设置背景图片，或者创建自定义数据属性。或者在.ts文件中动态创建？显示占位符文本。还有其他人遇到过这个问题吗？

感谢您的任何建议！

Answer 1

您可以像这样绑定到placeholder

<input type="search" matInput [placeholder]="placeholderText">

然后在你的班上，

placeholderText = 'My Placeholder';

updatePlaceholderText() {
  this.placeholderText = 'Search';
}

Answer 2

谢谢你，@威尔豪威尔 - 让我走上了正确的道路。我最终做的是添加一个新属性＆＃34; real-placeholder＆＃34; ＆安培;操纵它。

<强> template.html

<input type="search" real-placeholder="Search" placeholder="My Placeholder"
(focus)="onInputFocus($event)" (blur)="onInputBlur($event)">

<强> component.ts

/**
* Input focus event listener.
* @param {Event} event
*/
public onInputFocus(event: HTMLSelectElement): void {
    const placeholder = event.target.getAttribute('real-placeholder');
    event.target.setAttribute('placeholder', placeholder);
}

/**
* Input blur event listener.
* @param {Event} event
*/
public onInputBlur(event: HTMLSelectElement): void {
    event.target.setAttribute('placeholder', '');
    if (event.target.value !== '') {
        event.target.setAttribute('style', 'opacity:1;');
    }
}

<强> component.scss

[real-placeholder] {
    opacity: 0;
    -webkit-transition: opacity 0.4 ease-in-out;
    transition: opacity 0.4 ease-in-out;

    &:focus {
        opacity: 1;
    }
}

以上将放置＆＃34;搜索＆＃34;在输入区域中，就像传统的html占位符属性一样。我添加了一些更好的CSS以获得＆＃34;搜索＆＃34;淡入淡出与快速开启/关闭。

希望这有助于其他人！

如何使用Angular4创建其他占位符属性？

2 个答案: