মুদ্রা প্রতীক সহ এইচটিএমএল পাঠ্য ইনপুট ক্ষেত্র

Question

আমি শুরুতে "$" চিহ্ন সহ একটি পাঠ্য ইনপুট ফিল্ডটি রাখতে চাই এবং সাইনটি অবিচল থাকার জন্য ক্ষেত্রটিতে যা কিছু সম্পাদনা ঘটে তা বিচার্য নয়।

আমি সংখ্যাটি কেবল ইনপুটটির জন্য গৃহীত হলে আমি ভাল হব, তবে এটি কেবল অভিনব সংযোজন।

Answer 1

সীমান্তহীন ইনপুট ফিল্ডের চারপাশে সীমানা যুক্ত স্প্যান ব্যবহার করে একটি নির্দিষ্ট উপসর্গ বা প্রত্যয় সহ একটি ইনপুট ক্ষেত্রের অনুকরণ বিবেচনা করুন। এখানে একটি বেসিক কিক অফ উদাহরণ রয়েছে:

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

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

Comments

অতিরিক্তভাবে আপনি <ab লেবেল> ট্যাগের মধ্যে '$' মোড়ানো করতে পারেন। যখন তারা '$' - টেক্সট

— কোহেন

@ কোহেন যদিও একটি ভাল ধারণা, একাধিক লেবেল থাকা অ্যাক্সেসযোগ্যতায় সমস্যা তৈরি করতে পারে ।

— rybo111

Answer 2

একটি পিতামাতার .input-iconডিভ ব্যবহার করুন । Ptionচ্ছিকভাবে যুক্ত করুন .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;
}

গৃহীত উত্তরের মতো নয়, এটি কোনও ত্রুটি হলে লাল সীমান্তের মতো হাইডাইলিং ইনপুট বৈধতা ধরে রাখবে।

বুটস্ট্র্যাপ এবং হরফ ফন্ট সহ জেএসফিডেল ব্যবহারের উদাহরণ

Comments

আমি এক ঝরঝরে লাইন একটি বোতামে সঙ্গে এই চেয়েছিল এবং যোগ করার জন্য ছিল float:leftথেকে input-symbolDIV আছে

— kluka

@ rybo111 না, আমি বোঝাতে চাইছি একটি পৃথক বোতাম যা input-symbol

— ধারকটির

আপনি ঠিক বলেছেন, floatখারাপ তাই আমি এখনকার display:inline-blockসাথে একত্রিত হয়ে ব্যবহার করছি vertical-align:bottom:) আমি দ্রুত

— কোনও ফিডাল বানাতে

আমি এই উত্তরটি গ্রহণযোগ্যটির চেয়ে পছন্দ করি যেহেতু এটি (যেমন লেখক উল্লেখ করেছেন) বুটস্ট্র্যাপের বৈধতা আচরণটি ধরে রাখে যা দুর্দান্ত !, এই সহায়তার জন্য ধন্যবাদ।

— ভাদিরাজ

Answer 3

আপনি নিজের ইনপুট ক্ষেত্রটিকে স্প্যানে গুটিয়ে রাখতে পারেন, যা আপনি position:relative;। তারপরে আপনি :before content:"€"আপনার মুদ্রার প্রতীকটি যুক্ত করুন এবং এটি তৈরি করুন position:absolute। ওয়ার্কিং জেএসফিডাল

এইচটিএমএল

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

আপডেট আপনি যদি পাঠ্য বাক্সের বাম বা ডানদিকে ইউরো চিহ্নটি রাখতে চান। ওয়ার্কিং জেএসফিডাল

এইচটিএমএল

<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

ইউরো মুদ্রা সর্বদা ডানদিকে প্রদর্শিত হয়। আপনার চিহ্নটি বামের পরিবর্তে ডানদিকে রাখা উচিত।

— jadok

আমি ফ্রেঞ্চ এবং দাম সবসময় ২.৫০ like ২.৫০ এর মতো লেখা হয় এবং আমি নিশ্চিত যে ইউরো অঞ্চলের অন্যান্য দেশও একই রকম হয়।

— jadok

@ জাজোক আমি নেদারল্যান্ডসে থাকি এখানে দামগুলি € 2,50 হিসাবে লেখা হয়।

— ভিনসেন্ট কোক

@ ভিনসেন্টকোক চারপাশে জিজ্ঞাসা করার পরে মনে হয় এটি দেশের উপর নির্ভর করে, ল্যাটিন ইউরোপীয় দেশ (ফ্রান্স, স্পেন, ...) এটি ডানদিকে রাখবে এবং উত্তর / পূর্ব ইউরোপীয় দেশটি বাম দিকে রাখবে, আপনি উদাহরণ দিয়ে এটি আশ্চর্যরূপে ব্যবহার করতে পারেন : www.amazone.fr, www.amazone.nl, ...

— jadok

Answer 4

যেহেতু আপনি ব্যবহার করতে পারবেন না ::beforeসঙ্গে content: '$'ইনপুট এবং একটি একেবারে স্থান উপাদান যোগ করার অতিরিক্ত এইচটিএমএল যোগ করে - আমি একটি ব্যাকগ্রাউন্ড করা SVG ইনলাইন সিএসএস করতে পছন্দ করি।

এইটার মতো কিছু একটা হচ্ছে:

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

'$' এর ভিতরে না রেখে পাঠ্য ইনপুট ক্ষেত্রের সামনে রাখুন। এটি সাংখ্যিক ডেটার জন্য বৈধতা অনেক সহজ করে তোলে কারণ আপনাকে জমা দেওয়ার পরে '$' পার্স করতে হবে না।

আপনি, জিকুয়েরি.অলদিয়েট () (বা অন্যান্য) দিয়ে মুদ্রা পরিচালনা করে এমন কিছু ক্লায়েন্ট-সাইড বৈধকরণের বিধি যুক্ত করতে পারেন। এটি আপনাকে ইনপুট ক্ষেত্রে '$' রাখতে দেয় have তবে আপনাকে সুরক্ষার জন্য এখনও সার্ভার-সাইড বৈধতা করতে হবে এবং এটি আপনাকে '$' অপসারণের অবস্থানে ফিরিয়ে দেয়।

Comments

ধন্যবাদ! আমি এটি সম্পর্কে সচেতন ছিলাম, তবে পাঠ্যের ক্ষেত্রের ভিতরে থাকতে আমার আসলে আমার মুদ্রার সাইন দরকার ছিল। নীচে আরও ভাল উত্তর আছে যা আমি বিশ্বাস করি অনেক লোকের পক্ষে সহায়ক হতে পারে।

— ব্যবহারকারী 3419

@ হিস্টো: আমি খুশী যে আপনি এমন একটি সমাধান পেয়েছেন যা উপযুক্ত। কিন্তু রেকর্ডের জন্য, এক আপনি উত্তর হিসেবে চিহ্নিত করেছি যে আপনার $ করা নেই মধ্যে ইনপুট ক্ষেত্র। এটি কেবল স্টাইলিংয়ের সাথে রয়েছে বলে মনে করে। বলেছিল, এটা অবশ্যই চতুর!

— ই

হ্যাঁ, এটি দৃশ্যত সমস্যাটি সমাধান করে, যখন আপনার পরামর্শটি কেবল পয়েন্ট করছে (হ্যাঁ, এখনও সঠিক দিকে), তবে আমি এটিকে সমাধান বলব না। আপনাকে আবারও অনেক ধন্যবাদ এবং মনে রাখবেন আমি এখানে কাউকে আপত্তি জানাতে চাইনি!

— ব্যবহারকারী 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

: পূর্বে এবং: সিএসএস সিউডোর পরে নির্বাচকরা কেবল ধারক ট্যাগের জন্য ব্যবহার করা যেতে পারে এবং ইনপুট ট্যাগের জন্য কাজ করে না। stackoverflow.com/questions/2587669/...

— ভেঙ্কটেশ Nannan

Answer 9

আরেকটি সমাধান যা আমি পছন্দ করি তা হ'ল মুদ্রা প্রতীকের একটি চিত্রের জন্য অতিরিক্ত ইনপুট উপাদান ব্যবহার করা। অনুসন্ধানের পাঠ্য ক্ষেত্রের মধ্যে ম্যাগনিফাইং গ্লাসের চিত্র ব্যবহার করে এখানে একটি উদাহরণ দেওয়া হয়েছে:

এইচটিএমএল:

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

বাম পাশের বারের ইনপুটটিতে এটি ফলাফল:

https://fsfe.org

Answer 10

আমি সবেমাত্র ব্যবহার করেছি: পূর্বে ইনপুট দিয়ে এবং সামগ্রী হিসাবে পাস করেছি

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

Comments

আমি ক্রোমে এটি পুনরুত্পাদন করতে পারি না। আপনি কি কোনও জেএসফিডেলের উদাহরণ পোস্ট করতে পারেন?

— দাই

ইনপুটগুলি সিএসএস 3-তে সিউডো উপাদানগুলিকে সমর্থন করে না। অন্য কথায় খাঁটি সিএসএস দিয়ে এটি অসম্ভব। তবে jquery ব্যবহার করে আপনি $ ("ইনপুট") ব্যবহার করতে পারেন। ("$") পরে;

— টেটারজুইস

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 বামে স্থির করার প্রস্তাব দিই (আপনি এটি ইনপুট বাক্সের ভিতরে বা বাইরে চান কিনা তা নির্ভর করে)। অভ্যন্তরীণ সমাধানটির জন্য দিকনির্দেশ প্রয়োজন: ইনপুট সিএসএসে 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= পূর্বরূপ

Comments

উত্তরগুলির কোনওটিই এটির সাথে সহায়তা করবে না কারণ প্রশ্নটির অনুরোধটি এটি নয়। প্রতীকটি ইনপুটটির ভিতরে থাকার কথা ।

— rybo111

প্রযুক্তিগতভাবে CSS উত্তরগুলি ইনপুট ধারকটির ভিতরে ডলার চিহ্নটি রাখছে না। আমি মনে করি গৃহীত সিএসএস দ্রবণটি একটি সাধারণ ফর্মের সাথে প্রয়োগ করার সময় একটি জটিল প্রান্তিককরণ সমস্যা প্রবর্তন করছে। এখানে যেমন দেখা গেছে: plnkr.co/edit/uhOfLw5WB6DIn2le9GZm?p= পূর্বরূপ

— টেড শেকলারের

ইনপুটটির ভিতরে ডলারের চিহ্ন রাখার জন্য আমি এই সমাধানটি আপডেট করেছি: plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p= পূর্বরূপ ( স্থিতিশীল বাম 5px এবং rtl ইনপুট দিক সেট করুন)

— টেড শেকলারের

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>