Wie man WhatWG/W3C/Chrome Version 33.0.1750.146 "Regression Bug" mit <input type = "number" /> Felder

Question

Ich setze die Worte "Regression Bug" in Anführungszeichen, da es offensichtlich einige gemischte Meinungen darüber gibt. Für vollständige Details verfolgen Bug 24796 in Bugzilla.

Kurz Google Chrome vorgenommenen Änderungen nach der neuesten Version der WHATWG Spezifikationen: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary dass entfernt die folgenden Eigenschaften und Methoden aus <input type="number"/> Feldern.

Eigenschaften:

• selection
• selectionEnd

Methoden:

• select()
• setSelectionRange (Beginn, Ende)

(es gibt andere, aber diese sind die gemeinsamen verwendeten Schlüssel sind)

Die Methoden definiert werden, wenn Sie eine „numerische“ Instanz des HTMLInputElement jedoch überprüfen versucht, die anrufen Methoden oder fordern Sie die Eigenschaften wird eine Ausnahme auslösen. :-(

IMHO dies ist ein Fehler (seit die Funktionalität wurde mit nichts gewonnen gewonnen ... und es gibt 1000 von Websites/Anwendungen, die diese numerischen Eingabefelder über JavaScript erweiterten Verhalten bieten .. ., aber ich schweife ab) (für diejenigen, die es bekämpfen wollen sie bitte den Bug Beitrag oben verwenden aufgeführt)

TL; DR

für Usability Zwecke ich sicherlich wollen und planen <input type="number"/> Felder weiter zu verwenden als Sie geben dem User-Agent einen "Hinweis", dass wenn ich auf einem mobilen Gerät (Smartphone/Tablet /?) wäre gerne die numerische Tastatur präsentieren, wenn das Feld gegen die Standard-Alpha-Tastatur konzentriert ist.

jedoch für die aktuelle Version von Chrome (Version 33.0.1750.146) und jedem anderen Browser, der diese Spezifikation ändern blind implementiert Ich mag würde, um sicher die gerenderten Felder zurück zu <input type="text"/>

Hinweise konvertieren:

• Der Versuch, diese Felder während der Änderung ihres Inhalts zu ändern, hat sich als nicht erfolgreich erwiesen, da das Feld den Auswahlbereich verliert, wenn das Attribut type geändert wird.
• ich tun, um eine Umgehungslösung habe ich mit dem kam ich kurz schreiben werde, aber ich wollte diese Frage/Antwort für alle Entwickler war hier, um sicherzustellen, dass dieses Problem auftritt

Answer 1

ich mit diesem gelöst haben Mit dem folgenden Code:

function checkForInputTypeNumberBug(){ 
    var dummy = document.createElement('input'); 
    try { 
    dummy.type = 'number'; 
    } catch(ex){ 
    //Older IE versions will fail to set the type 
    } 
    if(typeof(dummy.setSelectionRange) != 'undefined' && typeof(dummy.createTextRange) == 'undefined'){ 
    //Chrome, Firefox, Safari, Opera only! 
    try { 
     var sel = dummy.setSelectionRange(0,0); 
    } catch(ex){ 
     //This exception is currently thrown in Chrome v33.0.1750.146 as they have removed support 
     //for this method on number fields. Thus we need to revert all number fields to text fields. 
     $('input[type=number]').each(function(){ 
     this.type = 'text'; 
     }); 
    } 
    } 
} 
$(document).ready(function(){ 
    checkForInputTypeNumberBug(); 
}); 

ich es eine eigenständige Funktion gemacht habe, als ich Fälle, wo die Felder über AJAX geladen werden, und ich muss in der Lage sein, die Funktion on the fly zu nennen.

Dieser Code behandelt ältere IE-Versionen, bei denen versucht wird, die Art zu setzen als auch behandeln die Ausnahme in Chrome (auf einem Dummy-Elemente) fehlschlagen, so dass Seiten dieses Verhalten ändern überwinden.

Update: Wie pro @Andy E Vorschlag um das Input Mode-Attribut (derzeit nicht unterstützt) Ich habe einen Fehler erstellt, um zu versuchen und die Umsetzung von Input Mode zu priorisieren, bevor Benutzeragenten die Auswahl APIs entfernen: https://www.w3.org/Bugs/Public/show_bug.cgi?id=26695

Answer 2

Je nach Anwendungsfall gibt es möglicherweise eine geeignetere (wenn auch aufwändige) Problemumgehung. Zum Beispiel, um Text an der aktuellen Position des Cursors hinzuzufügen, können Sie folgendes tun (in Chrome getestet):

var len, pre, post, 

    // Currently focused element 
    a = document.activeElement, 

    // Get current selection 
    s = window.getSelection(); 

// Delete any existing contents 
s.deleteFromDocument(); 

// Keep moving selection backward until the length stops increasing 
do { 
    len = String(s).length; 
    s.modify('extend', 'backward', 'line'); 
} 
while (String(s).length !== len); 

// Store the selection, then delete it 
pre = String(s); 
s.deleteFromDocument(); 

// Keep moving selection forward until the length stops increasing 
do { 
    len = String(s).length; 
    s.modify('extend', 'forward', 'line'); 
} 
while (String(s).length !== len); 

// Store the selection, then delete it 
post = String(s); 
s.deleteFromDocument(); 

// Recreate the contents with the new text added 
a.setAttribute('value', a.defaultValue); 
a.value = pre + txt + post; 

// Move the selection to after the new text 
a.select(); 
s = window.getSelection(); 
s.collapseToEnd(); 

while (len-- > 0) 
    s.modify('move', 'backward', 'character'); 

Es gibt Einschränkungen zu diesem Ansatz, der noch aufwendigere Lösungen müssen möglicherweise auch, wie beispielsweise, wenn ein anderer Wert als Text zurückgeführt wird, ausgewählt (die in einem type="email" Eingang, beispielsweise der Fall für arabicum Domänennamen sein kann).

Leider gibt es a bug, die diese Problemumgehung von der Arbeit in Firefox/Gecko verhindert, aber mindestens Firefox erlaubt noch Selection API auf <input type="email">.