Persist text in html input during user input

Question

I'm trying to append "USD" following user generated text as a unit in an html input. Right now I have some jquery that appends a $ before any input text, and then rebuilds the input, on each keyup

   $('#pledge_amt_gross_total').on('keyup',function(){
      var text = this.value;
      $(this).val("");
      if (text.indexOf("$") == -1){
         text = "$ " +text;
       }
      $(this).val(text);

    })

This works for anything before the user input text, but when I try to append anything after the user text, it doesnt work right.

Phil-R · Accepted Answer · 2013-07-26 19:40:31Z

4

I've made a version with a regex to find the number in the input and to wrap it in what you want. I added a timeout to prevent moving the cursor before user has finished his input. Try it in this fiddle

The code :

var formatTimeout;
$("#pledge_amt_gross_total").on("keyup", function() {
    var self = $(this);
    clearTimeout(formatTimeout);
    formatTimeout = setTimeout(function() {
        var regex = /\d+/;
        var amount = self.val().match(regex);
        if (amount.length > 0) {
         self.val("$ " + amount + " USD");   
        } else {
              self.val("");       
        }   
    }, 1000);
});

You can change the time before the format is applied in the setTimout function if you want it to be faster or slower.

Edit :

If you want any number to be concat in the format : fiddle

var formatTimeout;
$("#pledge_amt_gross_total").on("keyup", function() {
    var self = $(this);
    clearTimeout(formatTimeout);
    formatTimeout = setTimeout(function() {
        var regex = /\d+/g;
        var amount = self.val().match(regex);
        if (amount.length > 0) {
         self.val("$ " + amount.join("") + " USD");   
        } else {
              self.val("");       
        }   
    }, 1000);
});

I replaced the regex to be a global regex that will find any number. Then I join the numbers into one.

edited Jul 26, 2013 at 19:40

answered Jul 26, 2013 at 19:24

Phil-R

2,25320 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Neigher Over a year ago

this is closer, yet if I type in something, wait for the values to fill in, then continue typing, it does not edit the value originally included, it simply adds it on at the end, which is then removed.

Phil-R Over a year ago

Alright, I'll edit my post with this version that takes any number and concats it : jsfiddle.net/uH5uc/1

Jordan Over a year ago

Note that with the concatenation, you don't actually need the setTimeout.

Jordan · Accepted Answer · 2013-07-26 19:00:41Z

2

Just change

if (text.indexOf("$") == -1){
    text = "$ " +text;
}

to

if (text.indexOf("$") == -1){
    text = "$ " +text;
}
if (!(test.indexOf("USD") >= 0)){
    text = text + " USD";
}

edited Jul 26, 2013 at 19:00

answered Jul 26, 2013 at 18:49

Jordan

1,4338 silver badges14 bronze badges

3 Comments

Alex Neigher Over a year ago

This does not work either. Because the value of the input then becomes val="$ 55 USD", the next time I go to add more characters (or change the number) it creates a string like "$ 6USD55" where the numbers are added after the USD rather than before it after the $ sign

Jordan Over a year ago

@AlexNeigher You have to check if the text already contains USD before adding it then. See my edit

Alex Neigher Over a year ago

I'm still getting strings like $ 4 USD4444444 in the input. The problem is after you press a key once it works fine, then you go press another key, it does not alter the original string, and just adds it back onto the end of var text @user2532739

Collectives™ on Stack Overflow

Persist text in html input during user input

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related