ändern Präsentation von <input> Feld

Question

ich ein <input> Feld, wie unten in eine Form haben:

<input 
    class="form-control" 
    data-filter="M" 
    id="id_options_price" 
    name="options_price" 
    tabindex="141" 
    type="text" 
    value="121000.00"> 

Wie kann ich ändern, um die Präsentation des input, die erlauben, dieses Feld als 121 000,00 auf einige Seite anzuzeigen (mit Leerzeichen zwischen Zifferngruppe) unter Beibehaltung der value und type Attribute wie sie sind.

Gibt es eine Möglichkeit, es mit JS zu tun?

Answer 1

"Gibt es einen Weg, es mit JavaScript zu tun?"

Angenommen, es bezieht sich auf die Objektduplizierungsmethode, ja, ich kann Sie in JQuery zeigen.

Wir brauchen nur ein neues Element nur nach unserem Eingang eingefügt:

$("#id_options_price").after("<div class='price'>"+$("#id_options_price").val()+"</div>"); 

und den ursprünglichen Eingang zu verbergen:

$("#id_options_price").hide(); 

Natürlich sollten Thesen Zeilen aufgerufen werden, nachdem die Seite geladen, ich. e. :

$(document).ready(function() { 
    $("#id_options_price").after("<div class='price'>"+$("#id_options_price").val()+"</div>"); 
    $("#id_options_price").hide(); 
}); 

Answer 2

Wenn Sie die Nummer in das Eingabefeld angezeigt werden wan't, würden Sie den Platzhalter Attribut benötigen etwa so:

<input class="form-control" data-filter="M" id="id_options_price" name="options_price" tabindex="141" type="text" value="121000.00" placeholder="121000.00">

Answer 3

Diese Lösung könnte offensichtlich und dumm: Sie kann dazu 2 Elemente verwenden.

Ein Eingabeelement mit dem Typ "Versteckt" und der Wert für Ihr Formular. Ein div-Element mit CSS-Stil, nur zur Anzeige für den Benutzer.

Ich glaube nicht, dass Sie in der Lage sein werden, den Stil des Input-Tags zu ändern, um Ihr Ziel in reinem CSS zu erreichen. Soweit ich weiß, Eingaben als spezifische Elemente mit einem Teil ihrer Anzeige unhaltbar.

Edit: Als die Frage leicht geändert wurde, könnte diese Antwort irrelevant sein.

Answer 4

Den Eingangstyp auf "Nummer" einstellen. Auf diese Weise erhält die Zahl ein Komma anstelle eines Punktes und der Browser wandelt das Komma bei Bedarf automatisch in einen Punkt um, zum Beispiel für JavaScript.