CODEWITHSUNDEEP
javascriptjqueryhtml
Cymbals
Cymbals

Reputation: 1174

Remove Any Spaces While Typing into a Textbox on a Web Page Part II

This involves HTML + JS and/or JQuery:

I would have commented on the previous post, but I don't have comment reputation or cannot comment for some reason.

Josh Stodola's great code from Part I is as follows:

$(function() {
  var txt = $("#myTextbox");
  var func = function() {
    txt.val(txt.val().replace(/\s/g, ''));
  }
  txt.keyup(func).blur(func);
});

This works great except .replace puts the cursor at the end of the string on every keyup (at least in IE8 and Chrome). As a result, it renders the left & right cursor keys useless, which is needed inside the input box.

Is there any way to enhance the above code so that the cursor keys do not activate it, but so that the text still gets updated on the fly?

Upvotes: 2

Views: 1354

Answers (4)

Richard Edwards
Richard Edwards

Reputation: 2060

try:

$(function() {
  var txt = $("#myTextbox");
  var func = function(e) {
    if(e.keyCode != "37" && e.keyCode != "38" && e.keyCode != "39" && e.keyCode != "40"){
        txt.val(txt.val().replace(/\s/g, ''));
    }
  }
  txt.keyup(func).blur(func);
});

Upvotes: 1

Tim
Tim

Reputation: 1899

Update the function:

  var func = function(e) {
    if(e.keyCode !== 37 && e.keyCode !== 38 && e.keyCode !== 39 && e.keyCode !== 40){
        txt.val(txt.val().replace(/\s/g, ''));
    }
  }

Upvotes: 2

Andy E
Andy E

Reputation: 344753

The best solution is to avoid using key events to capture text input. They're not the best tool for the job. Instead, you should use the HTML5 oninput event (supported in the latest and recent versions of every current major browser) and fall back to onpropertychange for older versions of Internet Explorer:

var alreadyHandled;
txt.bind("input propertychange", function (evt) {
    // return if the value hasn't changed or we've already handled oninput
    if (evt.type == "propertychange" && (window.event.propertyName != "value" 
                                                           || alreadyHandled)) {
        alreadyHandled = false;
        return;
    }
    alreadyHandled = true;
    // Your code here
});

These events don't fire for keys that don't result in text entry — don't you just hate it when you shift-tab back to a form element and the resulting keyup event causes the page's script to move focus forward again?

Additional benefits over key events:

  • They fire immediately when the key is pressed and not when the key is lifted, as in keyup. This means you don't get a visual delay before any adjustments to the text are made.
  • They capture other forms of text input like dragging & droppping, spell checker corrections and cut/pasting.

Further reading at Effectively detecting user input in JavaScript.

Upvotes: 2

Jay Gilford
Jay Gilford

Reputation: 15151

$(function() {
  var txt = $("#myTextbox");
  var func = function() {
    txt.val(txt.val().replace(/\s/g, ''));
  }
  txt.keyup(function(evt){
    if(evt.keyCode < 37 || evt.keyCode > 40) {
      func;
    }
  }).blur(func);
});

Something like that should do it. It will run the function if the keycode isn't 37,38,39 or 40 (the four arrow key keycodes). Note that it won't actually stop the cursor position moving to the end when any other key is pressed. For that, you'd need to keep track of the current cursor position. Take a look at this link for jCaret plugin, which can do this

Upvotes: 0

Related Questions