JavaScript/jQuery – Add a character at the end of an input field

Question

I'm trying to make an input field which automatically puts a questionmark at the end of the typed text while typing.

I just came up with this code but obviously it generates multiple questionmarks.

$("#id").keyup(function(){
   $(this).val($(this).val() + "?");
});

Thank you for your ideas.

How would the code differentiate a question mark the user entered from one the script appended? In other words, how would you know when someone is done typing if you're checking after every character? — j08691
– j08691, Commented Jun 1, 2012 at 19:02

qwertymk · Accepted Answer · 2012-06-01 19:03:54Z

8

$("#id").keyup(function(){
    if ($(this).val().split('').pop() !== '?') {
        $(this).val($(this).val() + "?");
    }
});

DEMO

EDIT:

(function($) {
  $.fn.setCursorPosition = function(pos) {
    if ($(this).get(0).setSelectionRange) {
      $(this).get(0).setSelectionRange(pos, pos);
    } else if ($(this).get(0).createTextRange) {
      var range = $(this).get(0).createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery));
$("#id").keyup(function(){
    if ($(this).val().split('').pop() !== '?') {
        $(this).val($(this).val() + "?");
        $(this).setCursorPosition( $(this).val().length - 1)
    }
});

new DEMO

edited Jun 1, 2012 at 19:03

answered Jun 1, 2012 at 18:55

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

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

7 Comments

qwertymk Over a year ago

@amnotiam So why did you delete it?

user1106925 Over a year ago

Your demo shows that a ? is placed every other letter. At least in Firefox.

qwertymk Over a year ago

@amnotiam that's because the cursor is placed after the ? so then when you type, the last letter isn't a ? anymore.

user1106925 Over a year ago

I don't think that's the desired outcome. I'm pretty sure OP wants to maintain a question mark at the end as they type. Not sure though.

qwertymk Over a year ago

So then you need a cursor setting function also

|

Florian Margaine · Accepted Answer · 2012-06-01 19:04:18Z

0

// Input is way better than keyup, although not cross-browser
// but a jquery plugin can add its support.
$('#id').on('input', function() {
    // If the last character isn't a question mark, add it
    if ( this.value[ this.value.length - 1 ] !== '?' ) {
        this.value += '?';
    }
});

answered Jun 1, 2012 at 19:04

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

Collectives™ on Stack Overflow

JavaScript/jQuery – Add a character at the end of an input field

2 Answers 2

DEMO

new DEMO

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related