118

У меня есть поле даты, и я хочу удалить заполнитель по умолчанию.

Я использую javascript onfocusи onfocusoutсобытия для удаления заполнителя.

Может ли кто-нибудь помочь с использованием директивы angular2?

<input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="dateinput">

Я пытаюсь решить эту проблему, но у меня возникают проблемы со сбросом типа поля ввода.

import { Directive, ElementRef, Input } from 'angular2/core';
@Directive({
    selector: '.dateinput', 
    host: {
    '(focus)': 'setInputFocus()',
    '(focusout)': 'setInputFocusOut()',
  }})

  export class MyDirective {
      constructor(el: ElementRef) { this.el = el.nativeElement; console.log(this.el);}

      setInputFocus(): void {
        //console.log(this.elementRef.nativeElement.value);
      }
  }

angular Вишну
источник

235

Попробуйте использовать (focus)и (focusout)вместо onfocusиonfocusout

как это : -

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

также вы можете использовать так: -

некоторые люди предпочитают альтернативу префиксу on-, известную как каноническая форма:

<input name="date" type="text" on-focus="focusFunction()" on-focusout="focusOutFunction()">

Подробнее о привязке событий см. Здесь .

вы должны использовать HostListner для своего варианта использования

Angular вызовет декорированный метод, когда элемент хоста испускает указанное событие. @HostListenerявляется декоратором для метода обратного вызова / обработчика событий

См. Мое обновление рабочего Plunker.

Рабочий пример Working Plunker

Обновить

Некоторые другие события могут использоваться в angular -

(focus)="myMethod()"
(blur)="myMethod()" 
(submit)="myMethod()"  
(scroll)="myMethod()"

Пардип Джайн
источник

где вы использовали свою директиву с именем dateinput?

Пардип Джайн

@vishnu см. мой Обновленный пнукер

Пардип Джайн

2

Следует отметить, что если вы используете реализацию HTML по умолчанию, она может использовать глобальную область видимости при вызове назначенной функции. Например: onfocusout="someMethod()" someMethod()в этом случае будет вызываться в глобальной области видимости. Это еще одна причина, по которой использование Angular в этом случае полезно.

kbpontius

1

@ user5365075 Я не видел такого обновления, см. здесь демонстрацию focus ng6

Pardeep Jain

2

Моя ошибка, focusбудет работать с поддерживаемыми входами и текстовыми полями, но если у вас есть пользовательские компоненты, которые не поддерживают это, вы можете использовать focusinвместо этого :)

user5365075

7

Если вы хотите динамически отслеживать событие фокуса на каждом входе вашего компонента:

import { AfterViewInit, Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  constructor(private el: ElementRef) {
  }

  ngAfterViewInit() {
       // document.getElementsByTagName('input') : to gell all Docuement imputs
       const inputList = [].slice.call((<HTMLElement>this.el.nativeElement).getElementsByTagName('input'));
        inputList.forEach((input: HTMLElement) => {
            input.addEventListener('focus', () => {
                input.setAttribute('placeholder', 'focused');
            });
            input.addEventListener('blur', () => {
                input.removeAttribute('placeholder');
            });
        });
    }
}

Ознакомьтесь с полным кодом здесь: https://stackblitz.com/edit/angular-93jdir

abahet
источник

2

Я создал небольшую директиву, связывающуюся с атрибутом tabindex. Он динамически добавляет / удаляет класс has-focus.

@Directive({
    selector: "[tabindex]"
})
export class TabindexDirective {
    constructor(private elementHost: ElementRef) {}

    @HostListener("focus")
    setInputFocus(): void {
        this.elementHost.nativeElement.classList.add("has-focus");
    }

    @HostListener("blur")
    setInputFocusOut(): void {
        this.elementHost.nativeElement.classList.remove("has-focus");
    }
}

S.Galarneau
источник

0

Решение такое:

  <input (click)="focusOut()" type="text" matInput [formControl]="inputControl"
  [matAutocomplete]="auto">
   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" >
     <mat-option (onSelectionChange)="submitValue($event)" *ngFor="let option of 
      options | async" [value]="option">
      {{option.name | translate}}
     </mat-option>
  </mat-autocomplete>

TS
focusOut() {
this.inputControl.disable();
this.inputControl.enable();
}

Себа Арсе
источник

0

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

у меня работает от Pardeep Jain

Hoàng Hunh Nhật
источник

Обработка событий HTML5 (onfocus и onfocusout) с использованием angular 2

Ответы:

Обновить