Question

似乎无法在Chrome中粘贴<input type='date' />。我尝试了各种格式，包括yyyy-MM-dd MM / dd / yyyy，甚至只是一次粘贴一个组件（只是一个月或一年），但没有任何反应。我正在使用一个有角度的应用程序，我甚至尝试设置一个onpaste事件将粘贴的内容推送到一个角度模型，但它永远不会触发。

这就是我所拥有的：

HTML

<input date-field type='date' ng-model='dateOfBirth'/>

Angular Directive：

'use strict';

angular.module('angularcoreApp').directive('dateField', function($filter) {
  return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
        element[0].addEventListener('paste', function () {
          debugger;
          alert(arguments);
        }, false);
        ngModelController.$parsers = [];
        ngModelController.$parsers.push(function(data) {
          //View -> Model
          var date = Date.parseExact(data, "yyyy-MM-dd");
          ngModelController.$setValidity('date', date!=null);
          return date;
        });
        ngModelController.$formatters = [];
        ngModelController.$formatters.push(function(data) {
          //Model -> View
          return $filter('date')(data, "yyyy-MM-dd");
        });
       }
    }
});

我也导入了datejs。

目前我从未在粘贴事件监听器中点击debugger语句。不会抛出任何错误，并且似乎没有任何值输入到视图或模型中。

如何将日期粘贴到此输入中？

Answer 1

我在2016年面临同样的问题，发现可以通过将输入包装在其他元素中来解决这个问题。

<div id="wrapped" onpaste="alert(11)">
    <input type="date" id="input1">
</div>

知道div可以＆＃34;粘贴＆＃34;事件一可以修改输入数据。

Answer 2

我的解决方法是这样的：

const input = document.getElementById('my-input');

document.querySelector('body').addEventListener('paste', (e) => {
  if (document.activeElement !== input) {
    return;
  }

  const value = e.clipboardData.getData('text');

  input.value = value;
});

是否可以粘贴到输入[type ='date']？

2 个答案: