HTML-Texteingabefeld mit Währungssymbol

104

Ich hätte gerne ein Texteingabefeld, das ganz am Anfang das Zeichen "$" enthält, und unabhängig davon, welche Bearbeitung das Feld vornimmt, damit das Zeichen dauerhaft bleibt.

Ich wäre gut, wenn nur Zahlen für die Eingabe akzeptiert würden, aber das ist nur eine ausgefallene Ergänzung.

User3419
quelle

Antworten:

103

Erwägen Sie die Simulation eines Eingabefelds mit einem festen Präfix oder Suffix unter Verwendung eines Bereichs mit einem Rand um ein randloses Eingabefeld. Hier ist ein grundlegendes Kickoff-Beispiel:

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>

BalusC
quelle
13
Außerdem können Sie das '$' in ein <Label> -Tag einschließen. Dies verschiebt den Fokus auf das Eingabefeld, wenn sie
Cohen
2
@Cohen Obwohl es eine gute Idee ist, mehr als ein Etikett zu haben, kann dies zu Problemen mit der Barrierefreiheit führen .
Rybo111
63

Verwenden Sie ein übergeordnetes .input-icondiv. Optional hinzufügen .input-icon-right.

<div class="input-icon">
  <input type="text">
  <i>$</i>
</div>

<div class="input-icon input-icon-right">
  <input type="text">
  <i></i>
</div>

Richten Sie das Symbol vertikal an transformund aus topund stellen Sie pointer-eventses noneso ein, dass Klicks den Fokus auf die Eingabe richten . Passen Sie das paddingund widthnach Bedarf an:

.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
  padding-right: 0;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

Im Gegensatz zur akzeptierten Antwort bleibt die Hervorhebung der Eingabevalidierung erhalten, z. B. ein roter Rand, wenn ein Fehler auftritt.

JSFiddle-Anwendungsbeispiel mit Bootstrap und Font Awesome

rybo111
quelle
Ich wollte diese mit einem Knopf in einer ordentlichen Linie und musste hinzufügen float:leftzum input-symboldiv
Kluka
@ Rybo111 Nein, ich meinte einen separaten Knopf, der sich außerhalb des input-symbolContainers befindet
Kluka
Du hast recht, floatist schlecht, also benutze ich display:inline-blockkombiniert mit vertical-align:bottomjetzt :) Ich kann aber nicht schnell eine Geige machen, es gibt zu viel anderes CSS in meinem aktuellen Beispiel ;-)
kluka
1
Ich mag diese Antwort als die akzeptierte, da diese (wie der Autor erwähnt) das Validierungsverhalten von Bootstrap beibehält, was großartig ist!, Danke für diese Hilfe.
Vadiraj
30

Sie können Ihr Eingabefeld in einen Bereich einschließen, den Sie position:relative;. Dann fügen Sie mit :before content:"€"Ihrem Währungssymbol hinzu und machen es position:absolute. Arbeiten JSFiddle

HTML

<span class="input-symbol-euro">
    <input type="text" />
</span>

CSS

.input-symbol-euro {
    position: relative;
}
.input-symbol-euro input {
    padding-left:18px;
}
.input-symbol-euro:before {
    position: absolute;
    top: 0;
    content:"€";
    left: 5px;
}

Update Wenn Sie das Euro-Symbol entweder links oder rechts im Textfeld platzieren möchten. Arbeiten JSFiddle

HTML

<span class="input-euro left">
    <input type="text" />
</span>
<span class="input-euro right">
    <input type="text" />
</span>

CSS

 .input-euro {
     position: relative;
 }
 .input-euro.left input {
     padding-left:18px;
 }
 .input-euro.right input {
     padding-right:18px;
     text-align:end; 
 }

 .input-euro:before {
     position: absolute;
     top: 0;
     content:"€";
 }
 .input-euro.left:before {
     left: 5px;
 }
 .input-euro.right:before {
     right: 5px;
 }
Philipp Hofmann
quelle
Dies kommt dem, was ich möchte, sehr nahe, aber die Eingabe ist bei der Seitenbreite nicht stationär und kann nicht absolut verwenden. Relativ bewegt auch das Symbol. Wie können wir die Position absolut / relativ zur Eingabe oben links einstellen?
Nwolybug
Die Euro-Währung wird immer rechts angezeigt. Sie sollten Ihr Symbol rechts statt links platzieren.
Jadok
Ich bin Franzose und der Preis ist immer wie 2,50 € geschrieben, nicht 2,50 € und ich bin mir ziemlich sicher, dass das andere Land in der Eurozone dasselbe tut.
Jadok
2
@jadok Ich lebe in den Niederlanden. Hier werden die Preise mit 2,50 € angegeben.
Vincent Kok
1
@VincentKok Nachdem Sie nachgefragt haben, scheint es vom Land abhängig zu sein, das lateinische europäische Land (Frankreich, Spanien, ...) wird es rechts und das nord- / osteuropäische Land links platzieren. Sie können es mit Amazon anhand eines Beispiels versuchen : www.amazone.fr, www.amazone.nl, ...
Jadok
22

Da Sie ::beforemit content: '$'Eingaben nichts anfangen können und ein absolut positioniertes Element hinzufügen, wird zusätzliches HTML hinzugefügt - ich mache es gerne mit einem SVG-Inline-CSS im Hintergrund.

Es geht ungefähr so:

input {
    width: 85px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='85px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>$</text></svg>");
    padding-left: 12px;
}

Es gibt Folgendes aus:

SVG Dollar Zeichen Hintergrund CSS

Hinweis: Der Code muss sich alle in einer einzigen Zeile befinden. Die Unterstützung ist in modernen Browsern ziemlich gut, aber testen Sie sie unbedingt.

Jeff Callahan
quelle
2
Schöne Lösung. Am Ende fügte ich hinzu, background-repeat: no-repeat;als sich das $ im Eingabefeld wiederholte.
Hamid Tavakoli
Da Browser Eingabeelemente als "ersetzte Elemente" rendern können (z. B. als systemeigene Widgets), bedeutet dies, dass diese background-imagemöglicherweise nicht unterstützt werden, oder dass der Browser das Widget selbst rendert, anstatt die vom System bereitgestellten Widgets zu verwenden.
Dai
4

Am Ende brauchte ich den Typ, um immer noch als Zahl zu bleiben, also benutzte ich CSS, um das Dollarzeichen mit einer absoluten Position in das Eingabefeld zu schieben.

<div>
   <span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
   <input type="number" style="padding-left: 8px;">
</div>

Andy
quelle
3

Platzieren Sie das '$' vor dem Texteingabefeld und nicht darin. Dies erleichtert die Validierung numerischer Daten erheblich, da Sie das '$' nach dem Senden nicht mehr analysieren müssen.

Mit JQuery.validate () (oder anderen) können Sie einige clientseitige Validierungsregeln hinzufügen, die mit Währungen umgehen. Das würde es Ihnen ermöglichen, das '$' im Eingabefeld zu haben. Aus Sicherheitsgründen müssen Sie jedoch noch eine serverseitige Überprüfung durchführen, sodass Sie das '$' wieder entfernen müssen.

dnagirl
quelle
1
Danke dir! Ich war mir dessen bewusst, aber ich brauchte tatsächlich mein Währungszeichen, um im Textfeld zu sein. Es gibt eine bessere Antwort, von der ich glaube, dass sie vielen Menschen helfen kann.
User3419
@Hristo: Ich bin froh, dass Sie eine passende Lösung gefunden haben. Aber für den Datensatz, derjenige, den Sie als Antwort markiert haben, setzt Ihr $ nicht in das Eingabefeld. Es macht es nur scheint es zu sein , mit Styling. Das heißt, es ist definitiv glatt!
Dnagirl
1
Ja, es löst das Problem visuell, während Ihr Vorschlag nur zeigt (ja, immer noch in die richtige Richtung), aber ich würde es nicht als Lösung bezeichnen. Nochmals vielen Dank und denken Sie daran, ich wollte hier niemanden beleidigen!
User3419
2

Wenn Sie Safari nur unterstützen müssen, können Sie dies folgendermaßen tun:

input.currency:before {
  content: attr(data-symbol);
  float: left;
  color: #aaa;
}

und ein Eingabefeld wie

<input class="currency" data-symbol="€" type="number" value="12.9">

Auf diese Weise benötigen Sie kein zusätzliches Tag und behalten die Symbolinformationen im Markup.

Sebastian
quelle
7
: before und: after CSS-Pseudoselektoren können nur für Container-Tags verwendet werden und funktionieren nicht für Eingabe-Tags. stackoverflow.com/questions/2587669/…
Venkatesh Nannan
1

Eine andere Lösung, die ich bevorzuge, ist die Verwendung eines zusätzlichen Eingabeelements für ein Bild des Währungssymbols. Hier ist ein Beispiel mit einem Bild einer Lupe in einem Suchtextfeld:

html:

<input type="image" alt="Subscribe" src="/graphics/icons/search-button.png">
<input type="text" placeholder="Search" name="query">

CSS:

#search input[type="image"] {
background-color: transparent;
border: 0 none;
margin-top: 10px;
vertical-align: middle;
margin: 5px 0 0 5px;
position: absolute;
}

Dies führt hier zur Eingabe in der linken Seitenleiste:

https://fsfe.org

Sam Tuke
quelle
1

Ich habe gerade: vorher mit der Eingabe verwendet und $ als Inhalt übergeben

input{ 
   margin-left: 20px;
 }
input:before {
  content: "$";
  position: absolute;
}
DynamisDevelopment
quelle
1
Ich kann dies nicht in Chrome reproduzieren. Können Sie ein funktionierendes JSFiddle-Beispiel veröffentlichen?
Dai
Eingaben unterstützen keine Pseudoelemente in CSS3. Mit anderen Worten, mit reinem CSS ist das unmöglich. Wenn Sie jedoch jquery verwenden, können Sie $ ("input"). After ("$") verwenden.
TaterJuice
0

Für Bootstrap funktioniert es

<span class="form-control">$ <input type="text"/></span>

Verwenden Sie im Eingabefeld nicht class = "form-control".

Jestin
quelle
0

.currencyinput {
    border: 1px inset #ccc;
    padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>

Christian Bocaz
quelle
Code ohne Erklärung hilft dem OP oder zukünftigen Zuschauern dieser Antwort wenig. Sie sollten erklären, wie dies die Frage beantwortet.
Leigero
0

Keine dieser Antworten hilft wirklich, wenn Sie den linken Rand an anderen Textfeldern in einem Eingabeformular ausrichten möchten.

Ich würde empfehlen, das Dollarzeichen absolut links zu positionieren, etwa -10px oder links 5px (je nachdem, ob Sie es innerhalb oder außerhalb des Eingabefelds möchten). Die innere Lösung erfordert die Richtung: rtl auf dem Eingabe-CSS.

Sie können der Eingabe auch Auffüllungen hinzufügen, um die Richtung zu vermeiden: rtl. Dadurch wird jedoch die Breite des Eingabecontainers so geändert, dass sie nicht mit den anderen Containern derselben Breite übereinstimmt.

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:-10px;">$</div>
 </div>
 <input type='text' />
</div>

oder

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:5px;">$</div>
 </div>
 <input type='text' style='direction: rtl;' />
</div>

https://i.imgur.com/ajrU0T9.png

Beispiel: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

Ted Scheckler
quelle
1
Keine der Antworten hilft dabei, da dies nicht die angeforderte Frage ist. Das Symbol soll sich innerhalb der Eingabe befinden.
Rybo111
Technisch gesehen setzen die CSS-Antworten auch nicht das Dollarzeichen in den Eingabecontainer. Ich denke, die akzeptierte CSS-Lösung führt zu einem komplizierten Ausrichtungsproblem, wenn sie auf eine typische Form angewendet wird. Wie hier zu sehen: plnkr.co/edit/uhOfLw5WB6DIn2le9GZm?p=preview
Ted Scheckler
Ich habe diese Lösung aktualisiert, um das Dollarzeichen in der Eingabe zu platzieren: plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview (Position absolut links 5px und Eingaberichtung auf rtl setzen)
Ted Scheckler
0

<style>
.currencyinput {
    border: 1px inset #ccc;
    
    border-left:none;
}
.currencyinput input {
    border: 0;
}
</style>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>
</body>
</html>

%.

Ashish Rajput
quelle
-1

Ja, wenn Sie Bootstrap verwenden, würde dies funktionieren.

.form-control input {
    border: none;
    padding-left: 4px;
}

und

<span class="form-control">$ <input type="text"/></span>
Johnson Carneiro
quelle
-1
.currencyinput {
    border: 1px inset #ccc;

    border-left:none;
}
.currencyinput input {
    border: 0;`enter code here`
}

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>
Ashish Rajput
quelle