PrimeBlocks: One-Time Purchase Replaces Subscription Model 🎉Learn More

KeyFilter

A keyfilter is a directive used to block individual keystrokes based on a pattern.

Import #


import KeyFilter from 'primevue/keyfilter';

app.directive('keyfilter', KeyFilter);

Presets #

KeyFilter provides various presets configured with the v-keyfilter directive.

Integer

Number

Money

Hex

Alphabetic

Alphanumeric


<InputText v-keyfilter.int />
<InputText v-keyfilter.num />
<InputText v-keyfilter.money />
<InputText v-keyfilter.hex />
<InputText v-keyfilter.alpha />
<InputText v-keyfilter.alphanum />

Regex (Single Keypress) #

In addition to the presets, a regular expression can be configured for customization of blocking a single key press.

Block Space

Block < > * !


<InputText v-model="spacekey" v-keyfilter="/[^s]/" />
<InputText v-model="chars" v-keyfilter="/^[^<>*!]+$/" />

Regex (Whole Word) #

In addition to the presets, a regular expression can be used to validate the entire word using validateOnly option.

Block Numeric (allow "+" only once at start)


<InputText v-model="text" v-keyfilter="{ pattern: /^[+]?(d{1,12})?$/, validateOnly: true }" />

Accessibility #

KeyFilter is a directive and do not require any accessibility features.

Build Faster Design Better

490+ ready to use UI blocks crafted with PrimeVue and Tailwind CSS.

Learn More

name	type	default	description
pattern	RegExp	null	Sets the pattern for key filtering.
validateOnly	boolean	false	When enabled, instead of blocking keys, input is validated internally to test against the regular expression.
dt	any	null	It generates scoped CSS variables using design tokens for the component.
pt	PassThrough<KeyFilterDirectivePassThroughOptions>	null	Used to pass attributes to DOM elements inside the component.
ptOptions	any	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	type	default	description
root	KeyFilterDirectivePassThroughOptionType	null	Used to pass attributes to the root's DOM element.
hooks	any	null	Used to manage all lifecycle hooks.

name	type	default	description
pint	RegExp	false	Positive integer pattern for KeyFilter directive.
int	RegExp	false	Integer pattern for KeyFilter directive.
pnum	RegExp	false	Positive number pattern for KeyFilter directive.
money	RegExp	false	Money pattern for KeyFilter directive.
num	RegExp	false	Number pattern for KeyFilter directive.
hex	RegExp	false	Hexadecimal pattern for KeyFilter directive.
email	RegExp	false	Email pattern for KeyFilter directive.
alpha	RegExp	false	Alphabetic pattern for KeyFilter directive.
alphanum	RegExp	false	Alphanumeric pattern for KeyFilter directive.

name	type	default	description
instance	null \| ComponentPublicInstance<Object, Object, Object, Object, Object, Object, Object, Object, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, Object, Object, string, Object, Object, Object, string, ComponentProvideOptions>, Object, Object, "", Object, any> \| Record<string, any>	null
oldValue	any	null
arg	string	null
dir	ObjectDirective<any, any, string, string>	null
value	string \| KeyFilterOptions	null	Value of the KeyFilter.
modifiers	KeyFilterModifiers	null	Modifiers of the KeyFilter.

KeyFilter

Import #

Presets #

Regex (Single Keypress) #

Regex (Whole Word) #

Accessibility #

KeyFilter API

KeyFilter #

Interfaces #

KeyFilterOptions #

KeyFilterDirectivePassThroughOptions #

KeyFilterDirectivePassThroughAttributes #

KeyFilterModifiers #

KeyFilterDirectiveBinding #

Types #

KeyFilterDirectivePassThroughOptionType #