Gestione del pulsante di cancellazione di IE con il binding AngularJS

Question

IE ha una "X" in ciascun input di testo che cancellerà l'input. Tuttavia, quando si fa clic su questo pulsante, mentre si cancella la casella di testo, non viene aggiornato il modello angolare a cui è associato l'input.

<input type="text" ng-model="name" /> 

Vedere http://jsfiddle.net/p5x1zwr9/ per un esempio del comportamento.

Vedere http://youtu.be/LFaEwliTzpQ per un video del comportamento.

Sto usando IE 11.

EDIT: Ci sembra essere una soluzione per Knockout, ma non so come applicarlo a AngularJS: Handle IE 9 & 10's clear button with Knockout binding

UPDATE: Jonathan Sampson mi ha aiutato a capire che questo in realtà ha funzionato nelle versioni di AngularJS precedenti alla 1.3.6, quindi questo potrebbe essere un nuovo bug angolare.

UPDATE: problema aperto: https://github.com/angular/angular.js/issues/11193

Answer 1

Il tasto X in forme di ingresso è nativo per IE10 + e si può `t fare nulla, ma solo nasconderlo con i CSS:

input[type=text]::-ms-clear { 
    display: none; 
} 

Poi si puoi creare la tua direttiva per imitare questo tipo di comportamento. Basta creare uno span, posizionarlo all'interno di un input e aggiungere ng-click ad esso, che cancellerà il valore del modello dell'input.

Answer 2

La soluzione che ho trovato, mentre non aggiorna il modello immediatamente come rimuovere la X e implementare la propria soluzione, risolve ciò di cui avevo bisogno. Tutto ciò che ho fatto è stato aggiungere le opzioni di ng-model per includere la sfocatura. Quindi, quando l'input è sfocato, aggiornerà il valore dell'ambito.

<input type="text" ng-model="name" ng-model-options="{ updateOn: 'default blur'}" /> 

Answer 3

Ho creato questa direttiva angolare per gli elementi di testo di input, che chiamate manualmente cambiamento() evento dell'elemento quando il pulsante di cancellazione ('X') viene cliccato. Questo ha risolto il problema sul nostro progetto. Spero che aiuti gli altri.

angular.module('app') 
    .directive('input', function() { 
     return { 
      restrict: 'E', 
      scope: {}, 
      link: function (scope, elem, attrs) { 

       // Only care about textboxes, not radio, checkbox, etc. 
       var validTypes = /^(search|email|url|tel|number|text)$/i; 
       if (!validTypes.test(attrs.type)) return; 

       // Bind to the mouseup event of the input textbox. 
       elem.bind('mouseup', function() { 

        // Get the old value (before click) and return if it's already empty 
        // as there's nothing to do. 
        var $input = $(this), oldValue = $input.val(); 
        if (oldValue === '') return; 

        // Check new value after click, and if it's now empty it means the 
        // clear button was clicked. Manually trigger element's change() event. 
        setTimeout(function() { 
         var newValue = $input.val(); 
         if (newValue === '') { 
          angular.element($input).change(); 
         } 
        }, 1); 
       }); 
      } 
     } 
    }); 

Con grazie a questa risposta (Event fired when clearing text input on IE10 with clear icon) per il codice JavaScript per rilevare il tasto chiaro clic.

Answer 4

Sono stato in grado di risolvere questo problema utilizzando la seguente direttiva, derivata dalla risposta di 0x783e riportata sopra. Può fornire una migliore compatibilità con le versioni successive di angolari. Dovrebbe funzionare con $ watch o parser oltre a ng-change.

angular 
    .module('yourModuleName') 
    .directive('input', FixIEClearButton); 

FixIEClearButton.$inject = ['$timeout', '$sniffer']; 

function FixIEClearButton($timeout, $sniffer) { 
    var directive = { 
     restrict: 'E', 
     require: '?ngModel', 
     link: Link, 
     controller: function() { } 
    }; 

    return directive; 

    function Link(scope, elem, attr, controller) { 
     var type = elem[0].type; 
     //ie11 doesn't seem to support the input event, at least according to angular 
     if (type !== 'text' || !controller || $sniffer.hasEvent('input')) { 
      return; 
     } 

     elem.on("mouseup", function (event) { 
      var oldValue = elem.val(); 
      if (oldValue == "") { 
       return; 
      } 

      $timeout(function() { 
       var newValue = elem.val(); 
       if (newValue !== oldValue) { 
        elem.val(oldValue); 
        elem.triggerHandler('keydown'); 
        elem.val(newValue); 
        elem.triggerHandler('focus'); 
       } 
      }, 0, false); 
     }); 

     scope.$on('$destroy', destroy); 
     elem.on('$destroy', destroy); 

     function destroy() { 
      elem.off('mouseup'); 
     } 
    } 
} 

Answer 5

nascondendo usando i CSS Invece di 'type = text' uso 'type = Ricerca' in cerca fields.By fare questo solo ingressi contrassegnati come 'type = ricerca' non avra 'X', ma gli altri ingressi avrà ancora 'X' che è richiesto su molti altri campi in IE.

input[type=search]::-ms-clear { 
    display: none; 
} 

Answer 6

<input type="text" ng-model="name" id="search" /> 

This solution works for me 

$("#search").bind("mouseup", function(e){ 
    var $input = $(this), 
     oldValue = $input.val(); 

    if (oldValue == "") return; 

    // When this event is fired after clicking on the clear button 
    // the value is not cleared yet. We have to wait for it. 

    setTimeout(function(){ 

    var newValue = $input.val(); 
    if (newValue == ""){ 
$scope.name=""; 
$scope.$apply(); 

    } 
    }, 1); 

});