Turn off automatic space insertion on macOS - html

Question

When you copy then paste the string “word”, macOS sometimes inserts “word” (unchanged), “ word”, “word ”, or “ word ”, depending on what you’re pasting it next to, whether it thinks you copied it as a word or as a range, and whether you’re pasting into a writing input (like a note in the Notes app) or a string input (like Safari’s URL bar). Click-and-dragging to select results in a range copy, double clicking results in a word copy.
On macOS, Safari and Chrome perform automatic space insertion in all inputs, while Firefox performs it in none. Firefox also does not follow the native behavior for double clicking a word, right clicking a word, or copying a word.
You can play with the behavior with the following demo. Try double clicking a word then pasting it multiple times, then try selecting a word by dragging then pasting it multiple times.
<div>one two three</div>
<input>
Automatic space insertion is probably fine and intuitive for macOS users, but is sometimes inappropriate for the same reason it’s inappropriate in Safari’s URL bar: some contexts are not in English or any other written language. In these contexts, automatic space insertion leads to surprising results. For example, I ran into this issue when entering input in a micro-language of the form [field.{id}], then pasting an ID, which was copied as a word, then getting [field. {id}] and the error that it caused.
Ideally, I want to instruct the browser not treat an input’s value as writing. Minimally, I want to turn off automatic space insertion an inputs. How can I do this?
Things I’ve tried that didn’t work:
Setting lang="" or lang="none" on both the input and the copied text
Setting lang="zh" on both the input and the copied text (Chinese languages do not use spaces between words)
Setting spellcheck="false" on the input
Setting autocorrect="off" on the input (non-standard, Safari only)

Answer 1

One solution is to cancel then mimic the paste event in JS.
<input id="example">
document.querySelector('#example').addEventListener('paste', e => {
e.preventDefault();
const pastedText = e.clipboardData.getData('text/plain');
document.execCommand('insertText', false, pastedText);
});
This solution has the following limitations:
Requires JS
Does not also disable other writing-specific niceties, if any exist
Uses the deprecated document.execCommand API