disable space bar or paste a space using JavaScript or jQuery

Question

I need to restrict/disable end-user to enter space in the input field or text-box field. Currently I am using this code but it's not working properly.

function keyPress(e) { 
        var e = window.event || e;
        var key = e.keyCode;
        //space pressed
         if (key == 32) { //space
         return;
         }
        }

Why don't you just use validation to tell the user that what they entered is incorrect? — VLAZ, Apr 17 '19 at 10:43

Recep Karadas · Accepted Answer · 2019-04-17T11:37:06.287

3

Try keydown instead of keypress.

function keyDown(e) { 
  var e = window.event || e;
  var key = e.keyCode;
  //space pressed
   if (key == 32) { //space
    e.preventDefault();
   }
         
}

<input type="text" onkeydown="keyDown(event)" />

Edit

If you want to prevent to insert pasted text that contains whitespace you could use the following code:

function keyDown(e) { 
    var e = window.event || e;
    var key = e.keyCode;
    //space pressed
    if (key == 32) { //space
        e.preventDefault();
    }
}

function checkWhitespace(event)
{
 var data = event.clipboardData.getData("text/plain");
    var isNullOrContainsWhitespace = (!data || data.length === 0 || /\s/g.test(data));
  
    if(isNullOrContainsWhitespace)
    {
     event.preventDefault(); 
    }
  
}

<input type="text" onkeydown="keyDown(event)" onpaste="checkWhitespace(event)" />

edited Apr 17 '19 at 11:37

answered Apr 17 '19 at 10:48

Recep Karadas

669
4
10

Check out [MDN: keypress](https://developer.mozilla.org/en-US/docs/Web/Events/keypress) for further reading. – Recep Karadas Apr 17 '19 at 10:57
And what about pasting text? You can simply paste text with spacebars like "lorem ipsu" and this solution won't work. Better idea is to clear input by [removing spacebars](https://stackoverflow.com/questions/19873002/how-to-replace-all-spaces-in-a-string/19873010) – jacqbus Apr 17 '19 at 11:02

score 1 · Answer 2 · answered Feb 20 '21 at 06:13

<!-- Javascript  -->
<!-- prevent space in text box by  -->
function RestrictSpace() {
  if (event.keyCode == 32) {
    return false;
  }
}

<!--preventing copy and pasting to text box-->
function preventcopypaste(event) {
  var data = event.clipboardData.getData("text/plain");
  var isNullOrContainsWhitespace = (!data || data.length === 0 || /\s/g.test(data));

  if (isNullOrContainsWhitespace) {
    event.preventDefault();
  }

}

<!-- HTML  -->
<input type="text" onkeypress="return RestrictSpace()" onpaste="preventcopypaste(event)" />

score 0 · Answer 3 · answered Apr 17 '19 at 10:47

0

Try this,

function keyPress(e) { 
    var e = window.event || e;
    var key = e.keyCode;
    //space pressed
    if (key == 32) { //space
        return false;
    }
    return true;
}

answered Apr 17 '19 at 10:47

M.Hemant

2,345
1
9
14

score 0 · Answer 4 · answered Apr 17 '19 at 10:53

Try this code onkeypress event of textbox

<input type="text" onkeypress="keyDown()"/>

<script>
function keyDown(e) { 
  var e = window.event || e;
  var key = e.keyCode;
  //space pressed
   if (key == 32) { //space
    e.preventDefault();
   }
         
}
</script>

score 0 · Answer 5 · edited Jun 28 '22 at 13:48

0

// Disable space in inputs
    const no_space_input = document.querySelectorAll('input.nospace');
    no_space_input.forEach(element => {
        element.addEventListener('keydown', (event) => {            
            if (event.keyCode === 32) {
                event.preventDefault();
                return false;
            }
        });
    });

edited Jun 28 '22 at 13:48

Lee Taylor

7,761
16
33
49

answered Jun 23 '22 at 15:52

Roman Shyba

1
3

disable space bar or paste a space using JavaScript or jQuery

5 Answers5