CODEWITHSUNDEEP
htmlmacos
Matt Bierner
Matt Bierner

Reputation: 65283

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

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

Upvotes: 17

Views: 5695

Answers (6)

Sadhin
Sadhin

Reputation: 123

My Ans. is for who want to change this behaibior in Javascript not in their mac preference. This solution worked on my mac hope this will work on yours too.
Use " keypress " eventlistener:- 

var inp = document.querySelector("input");

inp.addEventListener("keypress", e => {
  if (e.key == " ") {
    e.preventDefault();
  }
});
<h2> Enter a text then try double spacing at once </h2>
<input type="text">

Upvotes: 0

stacking
stacking

Reputation: 1

The double space replacement behaviour is independent of the DOM content.

To get a sense for the problem, it might be useful to try

input.addEventListener("keydown", function(e){
   if (e.key===' '){
      e.preventDefault();
   }
})

and see what happens when you hit space twice quickly. The DOM shouldn't have registered/changed for either, but the double space 'replacement' script executes anyway.

Note, in my case I had to have a non-space character first to observe it, but unsure as to whether that's generalisable.

As to whether or not you can disable it? I don't know. But this should hopefully suggest approaches (eg. 'keyup' correction) to handling it if you can't.

Upvotes: 0

joshkarges
joshkarges

Reputation: 186

In React

I found that when the double space period happens, the event.nativeEvent.data is ". " (and the event.nativeEvent.type is "input". On a normal key press, the data is just a single character.

The order of the events on a double space period is

onchange
keydown
keyup

So, in a controlled component, you'll need to prevent setting your value in the onChange handler.

In vanilla JS

The 'input' event has the data property that is equivalent to the React event.nativeEvent.data above, and the order of events on a double spaced period is

input
keydown
keyup

Normally the events are

keydown
keypress
input
keyup

Upvotes: 0

AndrewKS
AndrewKS

Reputation: 3837

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

Upvotes: 2

Adam Barry
Adam Barry

Reputation: 76

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>

Upvotes: 2

Sibaprasad Maiti
Sibaprasad Maiti

Reputation: 557

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.

Upvotes: -2

Related Questions