wake-up-neo.net

iOS5 zeigt standardmäßig numerische Tastaturen ohne Verwendung von type = "number" oder type = "tel".

Mit der Veröffentlichung von iOS5 hat Apple den Eingabetypen = "number" -Formularfeldern eine eigene Validierung hinzugefügt. Dies verursacht einige Probleme. Siehe diese Frage weiter unten.

Eingabe type = 'number' Neue Validierung entfernt führende Nullen und Formatnummern in Safari für iPhone iOS5 und dem neuesten Safari für Mac

Obwohl input type = "tel" eine Zahlentastatur auf dem iPhone anzeigt, ist es die Telefontastatur , die keine Dezimalstellen hat.

Gibt es eine Möglichkeit, die numerische Tastatur mit Hilfe von html/js als Standard festzulegen? Dies ist keine iPhone App. Zumindest brauche ich Zahlen und einen Dezimalpunkt in der Tastatur.

Update

Zahleneingabefelder in Safari 5.1/iOS 5 akzeptieren nur Ziffern und Dezimalpunkte. Der Standardwert für eine meiner Eingaben ist $ 500.000 . Dies führt dazu, dass Safari ein leeres Eingabefeld anzeigt, da $,% ungültige Zeichen sind.

Wenn ich meine eigene Validierung onblur starte, löscht Safari das Eingabefeld, da ich dem Wert ein $ hinzufüge.

Die Implementierung von input type = "number" in Safari 5.1/iOS5 hat es daher unbrauchbar gemacht.

jsfiddle

Versuchen Sie es hier - http://jsfiddle.net/mjcookson/4ePeE/ Der Standardwert von $ 500.000 wird in Safari 5.1 nicht angezeigt. Wenn Sie jedoch die Symbole $ und, entfernen, wird dies der Fall sein. Frustrierend.

36
marissajmc

Arbeitslösung: Getestet auf iPhone 5, Android 2.3, 4

Tadecks Lösung (Kopfgeldgewinner), einen <span> zu verwenden, um die Eingabefeldsymbole zu enthalten und einen formatierten <span> auf die Währungseingabe zu setzen, ist im Wesentlichen das, was ich am Ende getan habe.

Mein endgültiger Code ist anders und kürzer, aber ich poste ihn hier. Diese Lösung behebt das iOS5-Validierungsproblem von $,% -Symbolen in Eingabefeldern, sodass input type="number" standardmäßig verwendet werden kann.

Symbolfeld zB "xx%" "xx Jahre"

<input name="interest-rate" value="6.4" maxlength="4" min="1" max="20" />
<span class="symbol">%</span>
  • Verwenden Sie einfach ein Zahleneingabefeld und einen Bereich außerhalb der Eingabe, um das Symbol anzuzeigen.

Währungsfeld zB. "$ xxx, xxx"

<span id="formatted-currency">$500,000</span>
<input id="currency-field" type="number" name="loan-amount" value="500000" maxlength="8" min="15000" max="10000000" />
  • Positionieren Sie den Bereich auf der Währungseingabe und setzen Sie die Eingabe auf . Anzeige: keine
  • Wenn ein Benutzer auf die Spanne klickt/tippt, blenden Sie die Spanne aus und zeigen Sie die Eingabe An. Wenn Sie die Spanne perfekt positionieren, ist der Übergang nahtlos.
  • Der Typ der Zahleneingabe sorgt für die Validierung.
  • Legen Sie für Unschärfe und Übergabe der Eingabe den Wert für den Bereich Der Eingabe fest. Formatieren Sie die Spanne. Blenden Sie die Eingabe aus und zeigen Sie den Bereich mit dem formatierten Wert An.

$('#formatted-currency').click(function(){
    $(this).hide();
    $('#currency-field').show().focus();
});
$('#currency-field').blur(function(){
    $('#formatted-currency').html(this.value);
    $('#formatted-currency').formatCurrency({
        roundToDecimalPlace : -2
    });
    $(this).hide();
    $('#formatted-currency').show();
});
// on submit
$('#formatted-currency').html($('#currency-field').val());
$('#formatted-currency').formatCurrency({
    roundToDecimalPlace : -2
});
$('#currency-field').hide();
$('#formatted-currency').show();
3
marissajmc

Stil für das Feld, um Symbole zu enthalten

Wenn es darum geht, die Symbole in dieses number-Feld aufzunehmen, können Sie einen solchen Rundgang wie folgt verwenden:

HTML:

<span id="number-container">
    <input type="number" name="number" id="number-field" value="500" />
    <span id="number-container-symbol">$</span>
</span>

CSS:

#number-container {
    position: relative;
}
#number-container-symbol {
    left: 5pt;
    position: absolute;
    top: 0px;
}
#number-field {
    background-color: transparent;
    padding-left: 10pt;
}

Behandle es als Konzeptnachweis. Sehen Sie this jsfiddle für ein Live-Beispiel. In Chrome sieht das so aus:

enter image description here

Kleinere Granularität definieren

Basierend auf der Dokumentation zur Zahleneingabe (Editor's Draft) , bis Granularität definieren müssen Sie das step="<some-floating-point-number>"-Attribut zum <input>-Tag hinzufügen:

<input type="number" name="number" value="500.01" step="0.01" />

und es wird in vielen modernen Browsern funktionieren. Siehe diese jsfiddle für Tests.

Fazit

Sie sollten in der Lage sein, es mit Symbolen zu versehen, die Sie benötigen. Es gibt auch eine Funktion, die laut Dokumentation die Unterstützung von Gleitkommazahlen ermöglicht.

Alternative Lösung - leeres Feld vor etwas anderem

Sie können auch jemanden dazu bringen, zu glauben, dass er den Inhalt des Eingabefelds sieht , aber ihm etwas anderes hinter dem Feld zeigen (dies ist eine Erweiterung meiner ursprünglichen Lösung). Wenn dann jemand auf das Feld tippt, können Sie den korrekten Wert usw. verbreiten und dann bei Unschärfe zum vorherigen Zustand zurückkehren. Sehen Sie diesen Code ( Live-Beispiel auf jsfiddle - blaue Farbe bedeutet, dass Sie etwas betrachten, das sich nicht im Feld befindet):

// store original value from INPUT tag in jQuery's .data()
var input_field = jQuery('#number-field');
var display_span = jQuery('#number-container-value');
var base_val = parseFloat(input_field.val());
input_field.data('storedVal', base_val);
input_field.val('');
display_span.html(base_val);

// react to field gaining and losing focus
jQuery('#number-field').on('focus', function(event){
    var el = jQuery(this);
    var display = jQuery('#number-container-value');
    if (typeof el.data('storedVal') != 'undefined'){
        el.val(el.data('storedVal'));
    };
    display.html('');
}).on('blur', function(event){
    var el = jQuery(this);
    var display = jQuery('#number-container-value');
    var new_val = parseFloat(el.val());
    el.data('storedVal', new_val);
    display.html(new_val);
    el.val('');
});

(Der vollständige Code mit Styling befindet sich auf der erwähnten jsfiddle). Der Code muss verkürzt und aufgeräumt werden, ist aber ein Proof of Concept . Probieren Sie es aus und teilen Sie Ihre Erkenntnisse mit.

16
Tadeck

Legen Sie das $ außerhalb des Eingabefeldes (als Bezeichnung). Oder das Prozentzeichen rechts vom Eingabefeld? Anscheinend würde das Ihr Problem lösen und Sie könnten input type = "number" verwenden.

7
Dad

Du sitzt zwischen einem Felsen und einem harten Ort. Bis es einen Platz in der HTML-Spezifikation für type="currency" gibt (und das wird wahrscheinlich nie passieren, da die verschiedenen Länder unterschiedliche Währungen schreiben), müssen Sie etwas JS-Zauber einsetzen, um das Problem zu umgehen. 

Natürlich sind Nummer und Telefon nicht die beste Idee, aber mit etwas JS-List habe ich mir diese Lösung ausgedacht:

var i   = document.getElementById( 'input' );

i.onblur    = function()
{
    i.type  = 'text';

    i.value = number_format( i.value );
}

i.onfocus   = function()
{
    var v   = Number( i.value.replace( /\D/, '' ) );

    i.type  = 'number';

    i.value = v > 0 ? v : '';
}

Ich tausche einfach die Art der Eingabe je nach Fokus/Unschärfe aus. Das heißt, wenn der Benutzer das Textfeld verlassen hat, können wir seinen Arsch formatieren. Wenn der Benutzer zurückkehrt, übernehmen wir den Wert. Wenn es einen Wert gibt, der größer als 0 ist, geben wir ihn als Zahl ein. Hier ist der Arbeitstest, ich hoffe es hilft: http://jsfiddle.net/ahmednuaman/uzYQA/

5
Ahmed Nuaman

Folgendes öffnet die numerische Tastatur für iPad mit iOS5, erlaubt die Eingabe von any und die Einstellung von any value:

<input type="text" pattern="\d*">

Es ist jedoch hässlich, zerbrechlich (wird in der Zukunft wahrscheinlich brechen ...) und funktioniert auf dem iPhone nicht (das iPhone zeigt die numerische Tastatur an, die nur 0 bis 9 zulässt). Die Lösung scheint nur mit dem Muster \d* oder dem entsprechenden [0-9]* zu funktionieren.

Vielleicht ist es besser, type="tel" zu verwenden, der scheinbar gleich wirkt.

3
robocat

Ich hatte ein ähnliches Problem und kam zu dieser tot-hässlichen js-Lösung, die das iPad zwang, die numerische Tastatur aufzurufen.

Mein Problem war, dass die Safari alles außer Ziffern filtert, wenn das Formular veröffentlicht wird, und ich verschiedene Zusatzzeichen benötige, zum Beispiel "3/7" oder "65 $".

var elem = document.getElementById('MathAnswer');
elem.type = 'number';

elem.onfocus = function() {
  setTimeout(function() {
    elem.type = 'text'; 
  }, 1);
};

Sie setzen den Eingabetyp einfach wieder auf "Text" nachdem das Ziffernblock des iPad angezeigt wurde, und voila, safari entfernt keine Nicht-Ziffern mehr. 

Hoffe es hilft jemandem!

2
Snorvarg

Diese Lösung funktioniert auf iPad und iPhone und sogar auf Nächste/Vorige Arbeit. Versuchen Sie http://fiddle.jshell.net/L77Cq/2/show/ (oder http://jsfiddle.net/L77Cq/ zum Bearbeiten).

<!DOCTYPE html>
<head>
<style>
    .riggedinput::-webkit-input-placeholder {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    Word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
}
</style>
<script>
    function focused() {
        var test = document.getElementById('test');
        setTimeout(function() { // timeout needed so that keyboard changes to numeric when using Next/Previous keyboard navigation buttons
            if (document.activeElement === test) {
                test.type = 'text';
                test.value = test.placeholder;
                test.placeholder = '';
            }
        }, 1);
    }
    function blurred() {
        var test = document.getElementById('test');
        var value = test.value;
        test.placeholder = value;
        test.value = '';
        test.type = 'number';
    }
    if (!/^(iPhone|iPad|iPod)$/.test(navigator.platform)) alert ('Code specific to Mobile Safari');
</script>
</head>
<body>
    <input>
    <input id="test" type="number" class="riggedinput" placeholder="$100.10USD" onfocus="focused()" onblur="blurred()">
    <input>
</body>

Es gibt immer noch folgende Probleme: * Wenn Formulare verwendet werden, muss der Wert in ein ausgeblendetes Feld kopiert werden. * Aus irgendeinem Grund wird die Seite lustig angezeigt (iPhone-Adressleiste versteckt, iPad Debug-Konsole versteckt). .

PS: Ich habe diese Technik unabhängig von Ahmed Nuamans Kommentar oben gefunden (ich hatte es in der Vergangenheit ausprobiert und habe gerade seinen Kommentar bemerkt - arrrgh!).

0
robocat

Ihr Problem wäre gelöst, wenn Safari das HTML5-Attribut "inputmode" für Eingabeelemente unterstützt. Niemand weiß, ob oder wann dies geschehen wird. Inzwischen gibt dieser Link interessante Lektüre.

0
rakensi

Es gibt möglicherweise eine andere Möglichkeit, das Problem für das iPhone zu umgehen:

<input id="test" TYPE="text" value="5.50" ontouchstart="this.type='number'" onfocus="this.type='text'" />

Dadurch wird der Typ in number before geändert, und die Eingabe erhält den Fokus, wenn sie berührt wird (so dass die numerische Tastatur angezeigt wird), und ändert den Typ in text, sodass der korrekte Wert bearbeitet werden kann.

Es kann schwierig sein, es zuverlässig zu arbeiten, z. Berühren Sie zur Zeit die Eingabe, lassen Sie den Finger dann aber vom Steuerelement weg und geben Sie Typ = Zahl ein. Ich kann mir unter anderem keine Möglichkeit vorstellen, die Schaltfläche Weiter auf der Tastatur zu erkennen.

0
robocat

Am Ende haben wir eine gehackte Lösung verwendet, damit die Nummern- und Interpunktions-Tastatur anzeigen kann, wenn fokussiert wird, was auf einem iPhone funktioniert: Wir nehmen die Tastendrucke auf und simulieren den Wert.

https://output.jsbin.com/necuzoj/quiet

Wir haben versucht, den Eingabetyp von type = number in type = text on focus zu ändern. Dies war jedoch unzuverlässig: (1) Die numerische Tastatur wurde nicht zu 100% angezeigt, und (2) wenn ein Formular länger war als das Bildschirm dann das automatische Scrollen, um anzuzeigen, dass die fokussierte Eingabe vollständig gestopft ist (manchmal war die fokussierte Eingabe außerhalb des Bildschirms oder unter der virtuellen Tastatur).

Das Anzeigen des numerischen Tastenfelds (z. B. type=tel) erlaubte keine Eingabe eines Dezimalpunkts oder Doppelpunkts.

Auf einem iPad können Sie einfach <input type=text pattern=[0-9]*> verwenden, um die Nummern- und Punktierungstastatur anzuzeigen. Diese Lösung funktioniert jedoch nicht für ein iPhone (ein iPhone zeigt den Ziffernblock ohne Dezimalpunkt an).

0
robocat