Restrict spacebar on mobile

I have to restrict spacebar on my textbox I restrict keyvode 32 using JavaScript and it's working fine on desktop but on mobile devices it doesn't works. Can anyone provide perfect solution for this?
ravininaveAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971MultitechnicianCommented:
no code to display?

just add an event for "input"

function removeSpaces() {
          var v = document.getElementById("YOUR_TEXT_BOX_ID").value.replace(/\s/g,"");
          document.getElementById("YOUR_TEXT_BOX_ID").value = v;
}
document.getElementById("YOUR_TEXT_BOX_ID").addEventListener("input", removeSpaces, false);

Open in new window


jquery version :

$("#YOUR_TEXT_BOX_ID").on("input", function() {
       $(this).val( $(this).val().replace(/\s/g,"") );
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Lansing Nye-MaddenNetwork AdministratorCommented:
If you are just looking for code that will make it work here you go:

var input = document.getElementById('no-space-tbx'),
    inputHandler = function(e) {
      console.log("Input Triggered '" + input.value + "'");
      input.value = input.value.trim();
    }
;
input.addEventListener('input', inputHandler);

Open in new window

Try It

Why this code?

The behavior of mobile devices entering text into textboxes is different than a web browser. First, there is no Keypress in Chome Mobile (Android) so if you are utilizing that event to cancel keying into browsers than that might be an issue for you.

Second, Google Chrome does some "Weird Voodoo" when it comes to key codes on the key down and up events. This is likely due to the "Auto-Suggest" feature of many mobile devices, and oddly enough, this behavior doesn't go away if you disable the auto-suggest feature. From what I can tell, Google Chrome is the browser that has the most "buggy" handling of key-down, key-up, key-press events.

Based on this information, it seems that the best way to handle this is a method called "Input Masking". It is explained in depth in my source article on the bottom of this solution, but it basically goes off a different event than key-down, key-up, key-press. The sequence of events is as follows: KeyDown,KeyPress,Input,KeyUp.

I have provided code just to do what you have requested and cancel spacebar in a text box, but if you are looking for more complicated handling or masking of text boxes on mobile devices I would check out the article below, or

There is a CRAZY amount of very helpful information in this article, and I know that hot-linking is not best practice, but I can't help but giving credit to the author of this article for their attention to detail and extremely in-depth explanation of this issue. I will likely be investigating this myself, and giving my own in-depth explanation in my own article on EE.

https://www.outsystems.com/blog/javascript-events-unmasked-how-to-create-input-mask-for-mobile.html

I hope that this helps you accomplish what you are trying to accomplish, please feel free to reach out if you have any further questions!
ravininaveAuthor Commented:
Sorry I was unable to post the code.
Thank you leakim971
Lansing Nye-MaddenNetwork AdministratorCommented:
It is important to note that the code that I provided gets rid of trailing and leading spaces, but I forgot that it will not remove spaces if someone makes a space within a word that is already typed in. In that case, you may want to use leakim971's handling using regex:

input.value = input.value.replace(/\s/g,"")

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.