CODEWITHSUNDEEP
jquery
swisstony
swisstony

Reputation: 1715

Jquery - How Do I Insert a Character into an input

Can someone help me out with this please...

I am doing a web form. I would like to insert the dollar sign into some INPUTs that have a numberfield class. I want the user's content to follow the dollar sign or course.

This inserts the dollar sign OK, but the content ends up in front of it.

$('input.numberfield').val('$');

NOTE - the dollar sign is required because this is financial data (nothing to do with jquery! :) )

in other words - someone types in '100' and it becomes '$100')

Upvotes: 8

Views: 9886

Answers (4)

jwwishart
jwwishart

Reputation: 2895

var store = $("input.numberfield");
store.val("$" + store.val());

Upvotes: 0

Happy
Happy

Reputation: 99

Why make your life complex? Just put the dollar sign into the HTML outside of the input element...

<span style="border: inset 1px black; padding: 1px;">
  $<input style="border: none; padding: 0;">
</span>

Upvotes: 9

cletus
cletus

Reputation: 625057

You can pass a function to val() and use a regular expression to add a $ to the front if there isn't one there already:

$("input.numberfield").val(function(i, val) {
  return val.replace(/^\s*(?!\$)/, "$");
});

The above regex means replace a sequence of white space at the beginning of the value that isn't followed by a dollar sign with a dollar sign. This would work too:

$("input.numberfield").val(function(i, val) {
  return val.replace(/^\s*(\$)?/, "$");
});

Upvotes: 4

Nick Craver
Nick Craver

Reputation: 630389

You can do something like this:

$('input.numberfield').each(function() {
  $(this).val('$' + $(this).val());
}

In 1.4, a simple more complete solution for your scenario:

 $('input.numberfield').keyup(function() {
   $(this).val(function(i,v) {
     return '$' + v.replace('$',''); //remove exisiting, add back.
   });
 });

Upvotes: 10

Related Questions