Html Text Input Field With Currency Symbol

HTML text input field with currency symbol

Consider simulating an input field with a fixed prefix or suffix using a span with a border around a borderless input field. Here's a basic kickoff example:

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

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

How can I print a dollar symbol inside(or before) the input box?

Not sure what you are asking for :

first one will just put a "$"sign before the input type

<tr>
<td>Hourly Pay Rate</td>
<td>$<input type = "number" name = "HPR" min="0" step="0.01"  required></td>
</tr>

second one will put a "$" inside the input type and will disappear once user start typing.

<tr>
<td>Hourly Pay Rate</td>
<td><input type = "number" placeholder="$" name = "HPR" min="0" step="0.01"  required></td>
</tr>

HTML5 number input field with currency symbol in the end of it

You need to give the <span> some sort of useful display property so that it will wrap the <input>. By default this element has a value of inline. In the example below I've used inline-block, but block would do just fine.

See updated fiddle.

.input-symbol-euro {  position: relative;  display: inline-block;  width: 50%;}
.input-symbol-euro input {  padding-right: 15px;  width: 100%;}
.input-symbol-euro:after {  position: absolute;  top: 50%;  transform: translateY(-50%);  margin: auto;  content: "€";  right: 20px;}
.form-control {  display: block;  height: 34px;  padding: 6px 12px;  font-size: 14px;  line-height: 1.42857143;  color: #555;  background-color: #fff;  background-image: none;  border: 1px solid #ccc;  border-radius: 4px;  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.form-control:focus {  border-color: #66afe9;  outline: 0;  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {  cursor: not-allowed;  background-color: #eee;  opacity: 1;}

<span class="input-symbol-euro">    <input type="number" value="0" min="0" step="1" class="form-control"  /></span>

Place dollar symbol inside a text input

The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">

As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:

https://jsfiddle.net/chzk1qgm/1/

.input-symbol-dollar {
  position: relative;
  display: block;
}
.input-symbol-dollar:after {
    color: #37424a !important;
    content: "$";
    font-size: 16px !important;
    font-weight: 400;
    position: absolute;

    display: block;
    height: 100%;
    top: 0;
    left: 10px;
    line-height: 46px; // height of input + 4px for input border
}

Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.

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

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

Format currency input field with dollar sign & commas

Well here's a way, though in truth not as simple as I hoped when I started down this path. You can use Intl.NumberFormat to get the comma in there (according to locale). To accomodate decimals, I sniff for them in the beginning and append them to the result.

To allow for the comma, I made this a text field with a pattern attribute. Also, I adjusted your CSS to make it a little nicer looking with the $

$('#price').keydown(function(e) {
  setTimeout(() => {
    let parts = $(this).val().split(".");
    let v = parts[0].replace(/\D/g, ""),
      dec = parts[1]
    let calc_num = Number((dec !== undefined ? v + "." + dec : v));
    // use this for numeric calculations
    // console.log('number for calculations: ', calc_num);
    let n = new Intl.NumberFormat('en-EN').format(v);
    n = dec !== undefined ? n + "." + dec : n;
    $(this).val(n);
  })
})

.body {
  text-align: left;
}

.fields {
  margin: 0 10px 0 0;
}

.fields:before {
  content: "$";
  text-align: center;
  position: relative;
  left: 35px;
}

#price {
  border-radius: 5px;
  margin: 15px;
  padding: 10px 10px 10px 20px;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rev-calculator">
  <label for="price">Monthly Revenue</label>
  <div class="fields">
    <input type="text" pattern="[0-9.,]+" name="price" id="price" required data-type="number" />
    <br>
</form>

Html Text Input Field With Currency Symbol