How to put ₹ symbol in front of the text in a text-box, ₹ Shouldn't be editable?

Question

I have a textbox that displays the amount in Rupee.

I want the ₹ symbol in front of the amount (₹250), the ₹ symbol should not be editable but the amount(text) in the text box should be editable.

<input type="text" value="&#8377;">

How can this be implemented?

There are a lot of different ways to do this. What approach have you tried? For example: you could put the symbol just outside the text box. Or, you could create a JS event that always adds the symbol to whatever value is in the input. Or, format currency in JS... I'm sure there are many other ways to achieve this. We need to know what approach you're attempting. — devlin carnate, Sep 23 '20 at 16:23
You should look at css. In that, you can add `xxxxx:before {content:"₹"}` where `xxxxx` is a classname or some other css selector [css selectors](https://www.w3schools.com/cssref/css_selectors.asp) — ATD, Sep 23 '20 at 16:23
This should have been dup-hammered: https://stackoverflow.com/q/2913236/5468463 — Vega, Sep 24 '20 at 02:44

gion_13 · Answer 1 · 2020-09-23T16:47:28.603

If you don't want to add any js logic, then you should add a wrapper and hardcode the currency there.

Ideally, this is a perfect scenario for using css pseudoclasses, as :before.
The idea is to add that fixed character from css:

input:before {
  content: '₹';
}

Unfortunately, pseudoclasses don't work on self-closing HTML elements, like <input /> (here's a more in-depth explanation of why this happens: https://stackoverflow.com/a/27708091/491075), so you'd have to add a wrapper to your input that would eventually hold the currency symbol.

Here's a simple example of how you could do that:

.input-wrapper {
  position: relative;
}

.input-wrapper:before {
  content: attr(data-currency);
  position: absolute;
  left: 0.25em;
  top: 0;
}

.input-wrapper > input {
  text-indent: 1em;
}

<div class="input-wrapper" data-currency="₹">
  <input type="number" />
</div>

<div class="input-wrapper" data-currency="$">
  <input type="number" />
</div>


<div class="input-wrapper" data-currency="€">
  <input type="number" />
</div>

If you can't or don't want to alter the DOM, then you could use javascript to listen to any change on the input and have the currency prepended to the value.
Here's a very simple example of how you could achieve this in plain js:

const currencySymbol = '$'
const input = document.getElementById('currency-input')

input.addEventListener('keyup', function(e) {
  input.value = input.value[0] === currencySymbol
    ? input.value
    : `${currencySymbol}${input.value}`
})

<input id="currency-input" value="$0" />

score 1 · Accepted Answer · answered Sep 23 '20 at 16:39

1

Another solution would be to use a <label> tag in front of the input:

label {
  position:relative;
  left:+15px;
}

input {
  text-align:right;
}

<label for="abc">₹</label><input type="text" id="abc"/>

answered Sep 23 '20 at 16:39

ATD

1,344
1
4
8

score 0 · Answer 3 · answered Sep 23 '20 at 16:28

You can use css ::before

Give your input a class of currency

<input type="text" value="&#8377;" class="currency">

Then add this to your css

    .currency::before{
       content: "₹";
       .. any other properties like width, height, position, size, color etc..
    }

The symbol will appear outside, in front of the input not inside the input. You can use position and padding to place it inside though.

How to put ₹ symbol in front of the text in a text-box, ₹ Shouldn't be editable?

3 Answers3