Context
In Lightning Web Components (LWC), developers sometimes want to prevent users from pasting into an input (for example, to force manual typing for verification codes). Because <lightning-input> is a base component rendered with Shadow DOM, preventing paste requires specific approaches. Below are practical, accessible, and maintainable ways to disable paste for inputs in LWC.
Recommended approaches
1) Use a native <input> when you need DOM control
If you need to intercept clipboard events directly, use a standard HTML input and style it with SLDS (or your CSS). This gives you direct access to native events like paste.
<template>
<input class="slds-input" onpaste={handlePaste} onkeydown={handleKeyDown} placeholder="Enter value" />
</template>
import { LightningElement } from 'lwc';
export default class NoPasteInput extends LightningElement {
handlePaste(event) {
// Stop the paste action
event.preventDefault();
}
handleKeyDown(event) {
// Optional: further key-level restrictions
}
}
Pros: Full control, straightforward. Cons: You lose some built-in lightning-input features (validation UI, types) and must re-style or replicate behavior.
2) Keep <lightning-input> and capture paste at the document (or root) level
Because you cannot access the internal <input> inside a base component’s shadow DOM, add an event listener that captures paste events and inspects the event’s composed path to determine whether the paste originated from your component.
<template>
<lightning-input label="Code" name="code" data-id="noPaste"></lightning-input>
</template>
import { LightningElement } from 'lwc';
export default class DisablePasteLwc extends LightningElement {
connectedCallback() {
this._boundPasteHandler = this._onDocumentPaste.bind(this);
// Capture phase to intercept before default behavior
document.addEventListener('paste', this._boundPasteHandler, true);
}
disconnectedCallback() {
document.removeEventListener('paste', this._boundPasteHandler, true);
}
_onDocumentPaste(event) {
// Use composedPath() to see if a lightning-input inside this component is in the event path
const path = event.composedPath ? event.composedPath() : [];
const myLightningInput = this.template.querySelector('lightning-input[data-id="noPaste"]');
if (!myLightningInput) {
return;
}
// If the lightning-input element is in the composed path, prevent the paste
if (path.includes(myLightningInput)) {
event.preventDefault();
}
}
}
Notes:
– We add the listener in capture mode (true) so clipboard events can be prevented early.
– composedPath() reliably includes shadow DOM hosts, letting us detect if the paste originated from inside the base component.
3) Validate/normalize input after paste (best for UX & accessibility)
Completely blocking paste can be a poor UX for keyboard and assistive-technology users. Instead, allow paste but validate the input value on change or input events and show inline help or error messages.
<template>
<lightning-input label="Code" value={value} onchange={handleChange}></lightning-input>
<div if:true={error} role="alert" class="slds-text-color_error">Only digits allowed. Please type the code.</div>
</template>
handleChange(event) {
const val = event.detail.value || '';
const sanitized = val.replace(/[^0-9]/g, '');
if (sanitized !== val) {
this.error = true;
// Optionally set the corrected value back
// this.template.querySelector('lightning-input').value = sanitized;
} else {
this.error = false;
}
}
Accessibility & security considerations
– Blocking paste can harm accessibility (screen readers, password managers, and clipboard-based workflows). Consider whether preventing paste is necessary.
– Prefer validation & clear inline guidance over outright blocking. If you must block paste (e.g., OTP fields with regulatory reasons), ensure keyboard users still have a good experience.
– Use server-side checks as final validation — client-side prevention is only for UX and can be bypassed.
Summary
Disabling paste in LWC can be done in several ways:
– Use a native <input> and intercept paste directly (cleanest approach for full control).
– Keep <lightning-input> and capture paste events at document level using composedPath() to detect your component and prevent the event.
– Prefer validating and sanitizing pasted input and providing helpful UI feedback instead of aggressively blocking paste, to maintain accessibility and a better user experience.