CODEWITHSUNDEEP
javascriptwhitespacedetectionkeyeventpreventdefault
Kilisi
Kilisi

Reputation: 444

Prevent more than one space between words

I have a function that prevents people putting numbers or any symbol but letters onkeypress into a text box due to ongoing problems with data entry.

<td><input type="text" name="name" onkeypress="return isAlfa(event)"></td>

Now some staff for reasons unknown put two spaces between words at random times. So I need to prevent them putting more than one space between words. I want to do this in the same function, but it keeps breaking.

function isAlfa(evt) {
  evt = (evt || window.event);
  var charCode = (evt.which || evt.keyCode);

  if ((charCode > 32)
    && (charCode < 65 || charCode > 90)
    && (charCode < 97 || charCode > 122)
  ) {
    return false;
  }
  return true;
}

How can I prevent them entering more than one space between words?

Upvotes: 0

Views: 3299

Answers (4)

user14894693
user14894693

Reputation:

This code will prevent multiple white spaces, that is, it will only allow 1 space and it will prevent two or more white spaces. You can configure the amount of white space you want to deny. I am not the author of the original code, but I made the modifications to make it work properly.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Your-title</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form>
            <label>Name</label>
            <input type="text" name="YourInputName">
        </form>
    </body>
</html>

<label>Name</label>
<input type="text" name="YourInputName">

<script>
  var field = document.querySelector('[name="YourInputName"]');

  field.addEventListener('keyup', function (event) {
    var userName = field.value;
    userName = userName.replace(/\s{2,}/g, ' ');
    field.value = userName;
  });
</script>

Upvotes: 1

Peter Seliger
Peter Seliger

Reputation: 13376

Neglecting all the other helpful suggestions and comments and strictly following the OP's requirements one has to ...

  1. Adapt the return condition in a way that takes into account if, with the current keystroke, a whitespace sequence is going to be created.
  2. Thus one has to implement a method that determines exactly that.
  3. There might be some possible helper methods too.
  4. code example ...

function isWhiteSpace(char) {
  return (/\s/).test(char);
}
function willCreateWhitespaceSequence(evt) {
  var willCreateWSS = false;
  if (isWhiteSpace(evt.key)) {
  
    var elmInput = evt.currentTarget;
    var content = elmInput.value;

    var posStart = elmInput.selectionStart;
    var posEnd = elmInput.selectionEnd;

    willCreateWSS = (
         isWhiteSpace(content[posStart - 1] || '')
      || isWhiteSpace(content[posEnd] || '')
    );
  }
  return willCreateWSS;
}

function isAlfa(evt) {

  evt = (evt || window.event);
  var charCode = (evt.which || evt.keyCode);

  return ((
       (charCode > 32)
    && (charCode < 65 || charCode > 90)
    && (charCode < 97 || charCode > 122)

  ) || willCreateWhitespaceSequence(evt)) ? false : true;
}
<input type="text" name="name" onkeypress="return isAlfa(event)"/>

Upvotes: 1

sandeep joshi
sandeep joshi

Reputation: 2151

may be try to use something like this. on your keypress event try to check the last value by using string substr method and if that gives you a space and current code is also a Space then prevent or do whatever you want to do with input.

function checkstuff(event){
  if (event.target.value.substr(-1) === ' ' && event.code === 'Space') {
    console.log('space pressed in sequence');
  }
}
<input type='text' onkeypress="checkstuff(event)">

Upvotes: 0

Mitya
Mitya

Reputation: 34556

Rather than listening for and evaluating each key press it would be far simpler just to react to any and all input and then sanitise whatever was entered via a RegExp.

Example:

<input type=text id=myfield />

JS:

document.querySelector('#myfield').addEventListener('input', evt => {
    evt.target.value = evt.target.value.replace(/[^a-z\s]/ig, '').replace(/\s{2,}/g, ' ');
});

That first replaces all non-letters and spaces with nothing, then replaces sequences of 2 or more spaces with a single space.

Upvotes: 0

Related Questions