1

How can i add Indian Rupee Symbol inside a text box field and do not use Rs.

Amount: <input name="amount" type="text" size="20" value="Rs. 1.00">

In this i need to show "Rs." in terms of a symbol, as how we use "$".

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
vishalkin
  • 1,175
  • 2
  • 12
  • 24
  • check these links http://www.wikihow.com/Install-and-Use-Indian-Rupee-Symbol-in-Windows http://www.labnol.org/india/windows-fonts-for-rupee/18964/ – Roy Sonasish Sep 04 '13 at 06:37
  • 1
    can't you just use the symbol ₹ by copy pasting it? – phil Sep 04 '13 at 06:38
  • i tried but its showing me a square box... included font also.. but symbol is not coming. – vishalkin Sep 04 '13 at 06:41
  • seems like similar question http://stackoverflow.com/questions/3598085/displaying-the-indian-currency-symbol-on-a-website – shemy Sep 04 '13 at 06:43
  • @shemy thanks but i've gone through that link.. but i want it inside 'textbox'... and text inside 'textbox' is hardcoded.. – vishalkin Sep 04 '13 at 06:55
  • you can try out this: – shemy Sep 04 '13 at 07:03
  • Text inside the `value` attribute of `input` is no more hardcoded than any other text on a page, so this *is* a duplicate. – Jukka K. Korpela Sep 04 '13 at 08:01
  • If you have problems with having the symbol displayed, as you do, search for questions with the word “rupee” in them. (This question only asks how to add the character, so “just use the symbol ₹” and “use a character reference” are correct answers to what was asked.) – Jukka K. Korpela Sep 04 '13 at 08:03

4 Answers4

4

According to me you shouldn't do this, whether you are saving the value in the database, or you are using to calculate something or anything else, simply store the integer, and than concatenate the Rs. or the rupee sign with the integer. This way it won't trouble you while calculating or storing values.

As far as the rupee symbol goes, you can use &#x20B9;

Demo

Demo 2 (Recommended)

Even Better Solution

I've made a demo from scratch which uses background-image, this way, your text field will indicate that the value is a rupee, also, it will be cross browser.

Demo

Demo 2 (Using background-size to make image tiny)

input[type=text].rupee {
    background-image: url(http://i.imgur.com/Fd7NROx.png);
    border: 1px solid #aaa;
    padding: 5px;
    padding-left: 20px; /* Indent the text values inside textbox */
    background-size: 20px 25px; /* Change symbol size */
    background-repeat: no-repeat; /* So that rupee image doesn't repeat */
}
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
0

use #8360; 

<input name="amount" type="text" size="20" value="&#8360; 1.00">
Bk Santiago
  • 1,523
  • 3
  • 13
  • 24
  • i dont want to show it as text i.e."Rs." i want to show it as a symbol – vishalkin Sep 04 '13 at 06:42
  • Hi, your post has been flagged as "low quality", probably because it consists solely of code. You could massively improve your answer by providing an explanation of exactly how and why this answers the question? – Ben Sep 04 '13 at 06:55
0

Just include the following javascript and it will update all the " Rs " to " Rupee Symbol " for you <script src="http://webrupee.anmoul.com/js" type="text/javascript"></script>

or Simply Use rupee symbol Unicode character code &#x20B9

Gurprakash Singh
  • 1
  • 1
0

Try this snippet

css

 .customTextfield input{
 border:unset;
  
}
.customTextfield input:focus{
  outline:unset;
}
.customTextfield{
  border:1px solid #000;
  padding:2px;
}
<span class="customTextfield">
  &#x20B9; <input name="amount" type="text">
</span>
YouBee
  • 1,981
  • 1
  • 15
  • 16