मुद्रा प्रतीक के साथ HTML पाठ इनपुट फ़ील्ड

Question

मैं बहुत शुरुआत में "$" चिन्ह युक्त एक पाठ इनपुट क्षेत्र रखना चाहता हूं, और इस बात के लिए कोई फर्क नहीं पड़ता कि संपादन किस क्षेत्र में होता है, संकेत के लगातार बने रहने के लिए।

मैं अच्छा होगा यदि केवल संख्याओं को इनपुट के लिए स्वीकार किया जाता है, लेकिन यह सिर्फ एक फैंसी जोड़ है।

Answer 1

सीमा रहित इनपुट फ़ील्ड के चारों ओर एक सीमा के साथ एक निश्चित उपसर्ग या प्रत्यय के साथ एक इनपुट फ़ील्ड का अनुकरण करने पर विचार करें। यहाँ एक बुनियादी किकऑफ़ उदाहरण दिया गया है:

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}

<span class="currencyinput">$<input type="text" name="currency"></span>

Comments

इसके अतिरिक्त आप <लेबल> टैग के अंदर '$' लपेट सकते हैं। जब वे '$' - टेक्स्ट

— कोहेन

@Cohen हालांकि एक अच्छा विचार है, एक से अधिक लेबल होने से पहुंच में समस्या हो सकती है ।

— rybo111

Answer 2

पैरेंट .input-iconडिव का इस्तेमाल करें । वैकल्पिक रूप से जोड़ें .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>

आइकन को लंबवत रूप से संरेखित करें transformऔर top, और इसके लिए सेट pointer-eventsकरें noneताकि क्लिक इनपुट पर केंद्रित हो। paddingऔर widthउपयुक्त के रूप में समायोजित करें :

.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;
}

स्वीकृत उत्तर के विपरीत, यह इनपुट सत्यापन हाइलाइटिंग को बनाए रखेगा, जैसे कि एक त्रुटि होने पर एक लाल बॉर्डर।

JSFiddle उपयोग उदाहरण बूटस्ट्रैप और फ़ॉन्ट विस्मयकारी के साथ

Comments

मैं एक साफ लाइन में एक बटन के साथ इस चाहता था और जोड़ने के लिए किया था float:leftके लिए input-symboldiv

— kluka

@ rybo111 नहीं, मेरा मतलब एक अलग बटन है जो input-symbolकंटेनर के बाहर है

— kluka

आप सही हैं, floatबुरा है इसलिए मैं अब display:inline-blockके साथ संयुक्त का उपयोग कर रहा हूँ vertical-align:bottom:) मैं जल्दी से एक बेला नहीं बना सकता, हालांकि मेरे वर्तमान उदाहरण में बहुत अधिक सीएसएस चल रहा है ;-)

— kluka

मुझे यह उत्तर स्वीकार करने की तुलना में पसंद है क्योंकि (लेखक का उल्लेख है) बूटस्ट्रैप के सत्यापन व्यवहार को बनाए रखता है जो महान है! इस मदद के लिए धन्यवाद!

— वदिराज

Answer 3

आप अपने इनपुट क्षेत्र को एक स्पैन में लपेट सकते हैं, जिसे आप position:relative;। फिर आप :before content:"€"अपनी मुद्रा प्रतीक के साथ जोड़ें और इसे बनाएं position:absolute। काम JSFiddle

एचटीएमएल

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

सीएसएस

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

अद्यतन यदि आप पाठ बॉक्स के बाईं या दाईं ओर यूरो प्रतीक रखना चाहते हैं। काम JSFiddle

एचटीएमएल

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

सीएसएस

 .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;
 }

Comments

यह जो मैं चाहता हूं उसके बहुत करीब है, लेकिन इनपुट पेज की चौड़ाई पर स्थिर नहीं है और निरपेक्ष का उपयोग नहीं कर सकता है। रिश्तेदार भी प्रतीक को इधर-उधर घुमाता है। हम इनपुट टॉप-लेफ्ट कार्नर पर स्थिति को पूर्ण / सापेक्ष कैसे सेट कर सकते हैं?

— nwolybug

यूरो मुद्रा हमेशा दाईं ओर दिखाई जाती है। आपको अपने प्रतीक को बाईं ओर दाईं ओर रखना चाहिए।

— जादोक

Im फ्रेंच और मूल्य हमेशा 2.50 € not € 2.50 की तरह लिखे जाते हैं और यह सुनिश्चित करते हैं कि यूरो क्षेत्र में अन्य देश भी ऐसा ही करते हैं।

— १ok:५२ पर जादोक j

@ जैदोक मैं नीदरलैंड में रहता हूं यहां कीमतें 2,50 € के रूप में लिखी गई हैं।

— विंसेंट कोक

@VincentKok इसके बारे में पूछने के बाद ऐसा लगता है कि यह देश पर निर्भर करता है, यूरोपीय देश (फ्रांस, स्पेन, ...) अक्षांशों को दाईं ओर और उत्तर / पूर्वी यूरोपीय देश बाईं ओर रख देंगे, आप उदाहरण के लिए इसे amazone के साथ आज़मा सकते हैं : www.amazone.fr, www.amazone.nl, ...

— jadok

Answer 4

जब से तुम ऐसा नहीं कर सकते ::beforeके साथ content: '$'आदानों पर और एक बिल्कुल तैनात तत्व जोड़ अतिरिक्त एचटीएमएल कहते हैं - मैं एक पृष्ठभूमि एसवीजी इनलाइन सीएसएस के लिए क्या करना पसंद है।

यह कुछ इस तरह चलता है:

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;
}

यह निम्नलिखित आउटपुट देता है:

नोट: कोड सब एक लाइन पर होना चाहिए। आधुनिक ब्राउज़रों में समर्थन बहुत अच्छा है, लेकिन परीक्षण करना सुनिश्चित करें।

Comments

अच्छा समाधान। मैंने समाप्त करते हुए कहा background-repeat: no-repeat;कि इनपुट बॉक्स में $ दोहरा रहा था।

— हामिद तवाकोली

चूंकि ब्राउज़र इनपुट तत्वों को "प्रतिस्थापित तत्वों" (जैसे सिस्टम देशी विजेट) के रूप में background-imageप्रस्तुत कर सकता है, इसका मतलब है कि इसका समर्थन नहीं किया जा सकता है, या सिस्टम-प्रदान किए गए विजेट का उपयोग करने के बजाय ब्राउज़र विजेट को प्रस्तुत कर सकता है।

— दाई

Answer 5

मैंने यह सुनिश्चित करने के लिए कि संख्या अभी भी एक संख्या के रूप में बनी हुई है, इसलिए सीएसएस का उपयोग एक पूर्ण स्थिति का उपयोग करके इनपुट क्षेत्र में डॉलर के संकेत को धक्का देने के लिए किया।

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

Answer 6

पाठ इनपुट फ़ील्ड के सामने '$' रखें, बजाय इसके अंदर। यह संख्यात्मक डेटा के लिए सत्यापन को बहुत आसान बनाता है क्योंकि आपको सबमिट करने के बाद '$' को पार्स करने की आवश्यकता नहीं है।

आप, JQuery.validate () (या अन्य) के साथ, मुद्रा को संभालने वाले कुछ क्लाइंट-साइड सत्यापन नियम जोड़ सकते हैं। यह आपको इनपुट क्षेत्र के अंदर '$' रखने की अनुमति देगा। लेकिन आपको अभी भी सुरक्षा के लिए सर्वर-साइड सत्यापन करना होगा और यह आपको '$' निकालने की स्थिति में वापस लाएगा।

Comments

धन्यवाद! मुझे इसके बारे में पता था, लेकिन मुझे वास्तव में पाठ क्षेत्र के अंदर होने के लिए मेरी मुद्रा चिन्ह की आवश्यकता थी। नीचे एक बेहतर उत्तर दिया गया है जिसके बारे में मेरा मानना ​​है कि इससे कई लोगों को मदद मिल सकती है।

— यूजर 3419

@ हिस्टो: मुझे खुशी है कि आपको एक समाधान मिला जो सूट करता है। लेकिन रिकॉर्ड के लिए, आपने जो उत्तर के रूप में चिह्नित किया है वह आपके $ को इनपुट क्षेत्र में नहीं डालता है । यह केवल स्टाइल के साथ ऐसा लगता है। यह कहा, यह निश्चित रूप से चालाक है!

— dnagirl

हां, यह समस्या को हल करता है, जबकि आपका सुझाव सिर्फ इशारा कर रहा है (हां, अभी भी सही दिशा में है), लेकिन मैं इसे समाधान नहीं कहूंगा। बहुत बहुत धन्यवाद फिर से और याद है कि मैं यहाँ किसी को अपमानित करने का मतलब नहीं था!

— यूजर 3419

Answer 7

 $<input name="currency">

इसे भी देखें: टेक्स्टबॉक्स में इनपुट को प्रतिबंधित करना: केवल संख्या और दशमलव बिंदु की अनुमति देना

Comments

हां, मैं वास्तव में मुद्रा चिन्ह को क्षेत्र के अंदर रखना चाहता हूं, लेकिन इनपुट प्रतिबंध लिंक के लिए धन्यवाद!

— यूजर 3419

Answer 8

यदि आपको केवल सफारी का समर्थन करने की आवश्यकता है, तो आप इसे इस तरह कर सकते हैं:

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

और एक इनपुट फ़ील्ड की तरह

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

इस तरह आपको अतिरिक्त टैग की आवश्यकता नहीं है और चिह्न जानकारी को मार्कअप में रखें।

Comments

: पहले और: CSS के बाद छद्म चयनकर्ताओं का उपयोग केवल कंटेनर टैग के लिए किया जा सकता है और इनपुट टैग के लिए काम नहीं करता है। stackoverflow.com/questions/2587669/…

— वेंकटेश नन्नन

Answer 9

एक अन्य समाधान जो मुझे पसंद है वह मुद्रा प्रतीक की एक छवि के लिए एक अतिरिक्त इनपुट तत्व का उपयोग करना है। यहां एक खोज पाठ क्षेत्र के भीतर एक आवर्धक कांच की छवि का उपयोग करके एक उदाहरण दिया गया है:

एचटीएमएल:

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

सीएसएस:

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

इसके परिणामस्वरूप यहां बाएं साइडबार पर इनपुट है:

https://fsfe.org

Answer 10

मैंने अभी उपयोग किया है: इनपुट से पहले और सामग्री के रूप में $ पारित किया

input{ 
   margin-left: 20px;
 }
input:before {
  content: "$";
  position: absolute;
}

Comments

मैं क्रोम में इसे पुन: पेश नहीं कर सकता। आप एक काम JSFiddle उदाहरण पोस्ट कर सकते हैं?

— दाई

निविष्टियाँ CSS3 में छद्म तत्वों का समर्थन नहीं करती हैं। दूसरे शब्दों में यह शुद्ध CSS के साथ असंभव है। हालांकि अगर jquery का उपयोग करके आप $ ("इनपुट") का उपयोग कर सकते हैं। ("$") के बाद;

— TaterJuice

Answer 11

बूटस्ट्रैप के लिए इसके काम करता है

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

इनपुट फ़ील्ड में क्लास = "फॉर्म-कंट्रोल" का उपयोग न करें।

Answer 12

.currencyinput {
    border: 1px inset #ccc;
    padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
    border: 0;
}

<span class="currencyinput">$<input type="text" name="currency"></span>

Comments

स्पष्टीकरण के बिना कोड इस उत्तर के ओपी या भविष्य के दर्शकों की मदद करने के लिए बहुत कम है। आपको यह बताना चाहिए कि यह प्रश्न का उत्तर कैसे देता है।

— लीगेरो

Answer 13

इन उत्तरों में से कोई भी वास्तव में मदद नहीं करता है यदि आप इनपुट फॉर्म पर अन्य टेक्स्ट फ़ील्ड के साथ बाईं सीमा को संरेखित करने से संबंधित हैं।

मैं डॉलर चिह्न को बाईं ओर -10px या बाईं ओर 5px की स्थिति में रखने की सलाह दूंगा (यह निर्भर करता है कि आप इसे इनपुट बॉक्स के अंदर या बाहर चाहते हैं)। अंदर के समाधान के लिए दिशा की आवश्यकता होती है: इनपुट css पर rtl।

आप दिशा से बचने के लिए इनपुट में पेडिंग भी जोड़ सकते हैं: आरटीएल, लेकिन यह इनपुट कंटेनर की चौड़ाई को उसी चौड़ाई के अन्य कंटेनरों से मेल नहीं खाने के लिए बदल देगा।

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

या

<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

उदाहरण: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

Comments

उत्तर में से कोई भी मदद नहीं करेगा क्योंकि यह वह नहीं है जो प्रश्न का अनुरोध करता है। प्रतीक इनपुट के अंदर होना चाहिए ।

— rybo111

तकनीकी रूप से सीएसएस उत्तर इनपुट कंटेनर के अंदर डॉलर का चिह्न नहीं डाल रहे हैं। मुझे लगता है कि स्वीकृत सीएसएस समाधान एक जटिल संरेखण समस्या पेश कर रहा है जब एक विशिष्ट रूप में लागू किया जाता है। जैसा कि यहाँ देखा गया है: plnkr.co/edit/uhOfLw5WB6DIn2le9GZm?p=preview

— टेड स्कैचर

मैंने इनपुट के अंदर डॉलर के चिह्न को रखने के लिए इस समाधान को अपडेट किया है: plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview (स्थिति पूर्ण बाएं 5 पीएक्स और

— आरटीएल

Answer 14

<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>

%

Answer 15

हां, यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो यह काम करेगा।

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

तथा

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

Answer 16

.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>