-1

在 Angular html 中，我有一个输入字段：

<input id="yy" name="yy" type="text" placeholder="{{ product }}"
         onfocus="this.placeholder = ''"
         onblur="this.placeholder = 'xxx'">

有了这个，当我将鼠标移出输入框时，它将占位符值显示为 xxx，这很好

但是，我不想硬编码“xxx”，而是想从 component.ts 中定义的变量中读取它

product = 'xxx'

在模板中，我尝试了：

onblur="this.placeholder = {{product}}"

但这不起作用。我尝试了其他一些东西，但它们不起作用

知道如何使用变量在模糊上设置占位符值而不是在那里硬编码一个值吗？

4

4 回答 4

0

用户，您需要更改变量“产品”，而不是this.placeholder。（不存在像this.placeholder这样的东西）。所以你需要两个变量

例如，您可以有两个变量“产品”和“占位符”

<input id="yy" name="yy" type="text" 
    [placeholder]="placeholder"
    (focus)="placeholder=''"
    (blur)="placeholder=product">

或两个变量“product”和“isOnfocus”并使用条件运算符

<input id="yy" name="yy" type="text" 
    [placeholder]="isOnFocus?'':product"
    (focus)="isOnFocus=true"
    (blur)="isOnFocus=false">

注意：在 Angular 中，您使用 (focus) 和 (blur)

于 2021-09-29T20:59:02.893 回答
0

作为替代解决方案，您可以仅使用 HTML/CSS 来完成此操作，我发现它更干净，组件中与样式/UI 相关的 JS 更少。

当您专注于输入时，这只会删除占位符（通过 font-size: 0）。可能您可以使用许多不同的 css 属性来实现这一点，但 font-size 对我有用。

<input 
  id="yy" 
  name="yy" 
  type="text" 
  placeholder="{{ product }}"
  class="input-test" />

.input-test:focus::placeholder {
  font-size: 0;
}
于 2021-09-29T20:43:59.187 回答
0

您可以尝试使用模板变量：

<input id="yy"
       name="yy"
       type="text"
       #inputRef
       [placeholder]="product"
       (focus)="inputRef.placeholder = ''"
       (blur)="inputRef.placeholder = product"/>
于 2021-09-29T19:57:27.313 回答
0 
<input
  id="yy"
  name="yy"
  type="text"
  placeholder="{{ product }}"
  (focus)="this.placeholder = ''"
  (blur)="this.placeholder = product"
/>

应该可以正常工作。但这是在操作组件上的一些占位符属性，而不是输入的占位符。如果您尝试设置输入的占位符，则不会以角度方式考虑这一点。

您可能正在尝试这样的设置：https ://stackblitz.com/edit/angular-9-starter-rwj1za?file=src%2Fapp%2Fapp.component.html

于 2021-09-29T18:41:14.630 回答