cursor is jumping when pressing the arrow keys

Question

I have a textbox, where a forbidden character cant be typed. #.

This works, however, when the textbox is filled in with data, and I put the focus on the middle of the textbox and then I use the arrow keys to go left and right, then it jumps to the end of the textbox.

If I type a character also in the middle of the textbox, it goes to the end again

$('[id$=txtClient]').keyup(function () {
        EnableClientValidateButton(); // When the textbox changes, the user has the ability to validate the client
        ChangeColorClient("0"); // The color is changed to white, to notify the user the client is not validated yet.
        var $el = $('[id$=txtClient]'); // the text element to seach for forbidden characters.
        var text = $el.val(); // The value of the textbox
        text = text.split("#").join("");//remove occurances of forbidden characters, in this case #
        $el.val(text);//set it back on the element
    });

The way you are stopping them enter # is wrong. You should just check on keyup and not allow the # key there. — Reinstate Monica Cellio, Jun 19 '13 at 09:07

score 3 · Answer 1 · edited May 23 '17 at 10:34

Javascript allows you to set the cursor position for inputs.

I found two useful functions:

getCaretPosition - https://stackoverflow.com/a/2897229/2335291
setCaretPosition - https://stackoverflow.com/a/512542/2335291

And the solution could look like this:

  function getCaretPosition (elem) {

    // Initialize
    var iCaretPos = 0;

    // IE Support
    if (document.selection) {

      // Set focus on the element
      elem.focus ();

      // To get cursor position, get empty selection range
      var oSel = document.selection.createRange ();

      // Move selection start to 0 position
      oSel.moveStart ('character', -elem.value.length);

      // The caret position is selection length
      iCaretPos = oSel.text.length;
    }
    // Firefox support
    else if (elem.selectionStart || elem.selectionStart == '0')
      iCaretPos = elem.selectionStart;

    // Return results
    return (iCaretPos);
  }

  function setCaretPosition(elem, caretPos) {
      if(elem != null) {
          if(elem.createTextRange) {
              var range = elem.createTextRange();
              range.move('character', caretPos);
              range.select();
          }
          else {
              if(elem.selectionStart) {
                  elem.focus();
                  elem.setSelectionRange(caretPos, caretPos);
              }
              else
                  elem.focus();
          }
      }
  }

$('[id$=txtClient]').keyup(function () {
    EnableClientValidateButton(); // When the textbox changes, the user has the ability to validate the client
    ChangeColorClient("0"); // The color is changed to white, to notify the user the client is not validated yet.
    var $el = $('[id$=txtClient]'); // the text element to seach for forbidden characters.
    var text = $el.val(); // The value of the textbox
    text = text.split("#").join("");//remove occurances of forbidden characters, in this case #

    var pos = getCaretPosition(this);
    $el.val(text);//set it back on the element
    setCaretPosition(this, pos);
});

THANK YOU! (NB: Works in Chrome and Opera as well) – T4NK3R Mar 29 '14 at 17:25 — T4NK3R, Mar 29 '14 at 17:25

score 1 · Accepted Answer · answered Jun 19 '13 at 09:42

This is a bit unpleasant, and I'm not 100% happy, but it solves all the given issues that you've had...

$("[id$=txtClient]").keyup(function (e) {
    var text = $(this).val();
    if (text.indexOf("#") > -1) {
        text = text.replace("#", "");
        $(this).val(text);
    }
});

Here's a jsFiddle example...

http://jsfiddle.net/E4cBK/

score 1 · Answer 3 · answered Jun 19 '13 at 10:12

1

Have you tried using the keypress event ?

The documentation warns about possible differences in behavior between platforms.

In Firefox at least, e.which corresponds to the ascii code of the typed character after transformation :

$('#txtClient').keypress(function (e) {
    console.log('keypress:', e.which);
    if (e.which == 35) {
        return false;
    }
});

updated fiddle

answered Jun 19 '13 at 10:12

LeGEC

46,477
5
57
104

unfortunately the cursor is still jumping when trying to insert the `#` in the middle. I guess you cannot solve this easily as claustrophobs proposed answer is good, but the CaretPosition is not supported by all browsers. – Christoph Jun 19 '13 at 11:01

score 0 · Answer 4 · answered Jun 19 '13 at 09:05

0

You can prevent to execute your code if the user presses a right or a left arrow. To do this you just need to add this condition:

if(e.which != 37 && e.which != 39){

You can find the key codes here.

Your full code would be:

$('[id$=txtClient]').keyup(function () {
    if(e.which != 37 && e.which != 39){  
        EnableClientValidateButton();
        ChangeColorClient("0"); 
        var $el = $('[id$=txtClient]'); 
        var text = $el.val(); 
        text = text.split("#").join("");
        $el.val(text);//set it back on the element
    }
});

LIVING EXAMPLE

answered Jun 19 '13 at 09:05

Alvaro

40,778
30
164
336

1

Wouldn't it be easier to just prevent the keypress for #? With your example you've not resolved the issue of typing in the middle of the textbox. – Reinstate Monica Cellio Jun 19 '13 at 09:06
@Archer You are right. I forgot about that part... I will take another look. – Alvaro Jun 19 '13 at 09:07

Christoph · Answer 5 · 2013-06-19T11:03:54.213

0

Just prevent the default action on keypress(keydown does not give consistent charCodes):

$('[id$=txtClient]').keypress(function (e) {
        if (String.fromCharCode(e.which) == '#'){
            e.preventDefault();
        }
});

This just prevents # and leaves the rest as it is.

Here you go;)

edited Jun 19 '13 at 11:03

answered Jun 19 '13 at 09:11

Christoph

50,121
21
99
128

Tried the demo? Which browser? – Christoph Jun 19 '13 at 09:15
I've changed the character code for you - should have been 222 – Reinstate Monica Cellio Jun 19 '13 at 09:16
Still not working in any of my browsers (IE 9, Chrome 27, Firefox...) – Alvaro Jun 19 '13 at 09:19
@Steve Because Archer changed it wrong. Several special keys unfortunately have different keycodes in different browsers – Christoph Jun 19 '13 at 09:21
@LuisValencia apparently `#` is a character where the keycode is dependent on the OS/Browser/Font whatever. KeyCodes 191 and 163 work for me in all browsers. – Christoph Jun 19 '13 at 09:30
@Christoph Sorry - my bad. I assumed it was a standard ASCII code. That's my new thing learnt for the day :) 222 works find for me in Chrome. There must be a way of narrowing it down. – Reinstate Monica Cellio Jun 19 '13 at 09:30
then I need another solution. :( – Luis Valencia Jun 19 '13 at 09:32
@LuisValencia try my revised version! ;) – Christoph Jun 19 '13 at 10:12
@Christoph - Much better than the ham-fisted way I suggested. I wasn't aware of `String.fromCharCode()` – Reinstate Monica Cellio Jun 19 '13 at 10:35
@Archer This only works with keypress though, which yields consistent results because in this state of the key event, it is mapped to the actual symbol and not the key on the keyboard. The only unpleasent thing is that keypress is not part of the official standard, that's why I tried to avoid it in the first place. [See my question here](http://stackoverflow.com/questions/17188302/consistent-keycode-for) :-D – Christoph Jun 19 '13 at 11:00

cursor is jumping when pressing the arrow keys

5 Answers5

Linked

Related