Html Text Input Element - Disable Mac Double Space to Insert Period

Viewed 2560

For an html text input element:

<input type='text'>

Can you disable Mac OS's double space to insert period feature in that input element? For example, if I press aspacespaceb in a standard text input box, a period is inserted after a:

enter image description here

For some types of text input, such as code, this behavior is not desirable even if a user has the feature enable on their system

3 Answers

This is an macOS system setting. On Sierra, you can turn it off by unchecking System Preferences > Keyboard > Text > Add period with double-space.

Keyboard Preference Screen Capture

I have done some digging around, and what I have found so far is that normally, when a value is written in an input-field, the field experiences the following JavaScript-events (in the following order):

  1. "keydown"
  2. "keypress"
  3. "keyup"

.. but when macOS automatically replaces double-spaces with a period, which happens when text in the input-field is followed by two taps on the space-bar in rapid succession (i.e. the input-field cannot be empty), the "keypress" event doesn't fire, and only the following events occur:

  1. "keydown"
  2. "keyup"

This means that even though it's probably a horrible solution, it is possible to detect the change, e.g. by keeping an eye of the last action and taking action in the keyup event if the previous event wasn't keypress:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>macOS prevent period/full stop on double-space</title>
    <meta charset="utf-8">
</head>

<body dir="ltr">

    <div>

        <input type="text" style="width: 50%;" value="text followed by period. Add double-space after this" autofocus />

    </div>

</body>

<script>

    var input = document.getElementsByTagName("input")[0],
        action;

    input.addEventListener("keydown", function (e){

        //Open the key-event group
        console.group("key event start", {
            code: e.code,
            keyCode: e.keyCode
        });

        console.group("keydown");
        console.log({
            e: e
        });

        action = e.type;

        console.groupEnd();
    });

    input.addEventListener("keypress", function (e){
        console.group("keypress");
        console.log({
            e: e
        });

        action = e.type;

        // console.log("value", e.target.value);

        console.groupEnd();
    });

    input.addEventListener("keyup", function (e){
        console.group("keyup");
        console.log({
            e: e
        });

        if (action != "keypress" && e.keyCode == 32 && e.target.value.endsWith(". ")) {
            console.warn("keypress action has been skipped, space-bar has been pressed and the input ends with '. '");

            e.target.value = e.target.value.replace(new RegExp(". " + "$"), " ");
        }

        console.groupEnd();

        //Close key-event group
        console.groupEnd();
    });

</script>

</html>

Go to System Preferences >> keyboard >> Text. Then uncheck the option "Add period with double-space".

This option is much useful in iPhone because when we're texting the "." doesn't come in the 1st keyboard layout. But on mac we can live without it.

Related