Question

我有一个JQuery日期选择器的指令，该指令将日期选择器注入到输入HTML控件中。这是由以前的开发人员开发的，目前我对Angular还是陌生的。

我的问题是，有什么方法可以防止在我们通过该指令注入的所有日期选择器上显示自动完成？

export class DanialDatePickerDirective implements ControlValueAccessor {

    constructor(protected el: ElementRef, private renderer: Renderer) { }

    @Input() dateformat: string = "DD-MMM-YY";
    @Input() ngModel: any;
    @Input() setDefaultDate: boolean;
    onModelChange: Function = () => { };
    onModelTouched: Function = () => { };

    writeValue(value: any) {
        if (value) {
            var ff = new Date(value);
            $(this.el.nativeElement).datepicker("setDate", ff);
        }
        else {
            $(this.el.nativeElement).datepicker("setDate", "");
        }
    }

    registerOnChange(fn: Function): void {
        this.onModelChange = fn;
    }

    registerOnTouched(fn: Function): void {
        this.onModelTouched = fn;
    }

    onBlur() {
        this.onModelTouched();
    }

    ngAfterViewInit() {
        var self = this;
        $(this.el.nativeElement).datepicker({
            dateFormat: 'dd-M-y',
            changeMonth: true,
            changeYear: true,
            showOtherMonths: true,
            selectOtherMonths: true
        });

        if (this.setDefaultDate) {
            var ff = new Date(self.ngModel);
            setTimeout(function () {
                $(self.el.nativeElement).datepicker("setDate", ff);
            }, 200);
        }

        $(this.el.nativeElement).on('change', (e: any) => {
            var model = e.target.value;
            var date = null;
            var monthstring = '';
            if (model.indexOf("-") > 0){
                monthstring = model.substring(model.indexOf("-") + 1, 5);
            }

            if (isNaN(parseInt(monthstring))) { 
                var tt = moment(model, "DD-MMM-YY").format('YYYY-MM-DD'); 
                date = tt;
                model = moment(model, "DD-MMM-YYYY").format('MM-DD-YYYY') 
            }
            else {

                date = moment(model, "DD-MM-YYYY").format('YYYY-MM-DD'); 
                model = moment(model, "DD-MM-YYYY").format('MM-DD-YYYY') 
            }

            $(".ui-datepicker a").removeAttr("href"); 
            self.onModelChange(date);

             self.writeValue(date.toString());
        });
    }

}

Answer 1

对我有用的唯一方法：

首先，请确保在输入元素本身和父表单上都设置autocomplete="off"。

第二，确保始终为输入字段分配唯一的名称。只需生成一个随机数并在字段名称中使用该数字即可实现。

  private getUniqueName() {
    return Math.floor(Math.random() * Date.now());
  }

说明：

过去，许多开发人员会将autocomplete =“ off”添加到他们的表单字段，以防止浏览器执行任何形式的自动完成功能。虽然Chrome仍会遵守此标签对于自动填充数据，它将不接受自动填充数据。 https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill。

因此autocomplete="off"解决了自动填充问题。但是，要解决自动填充问题，您需要通过再次更改输入名称来使浏览器变脏，这样浏览器将永远不会知道如何自动填充;）

日期选择器的Angular指令自动完成关闭

1 个答案: