diff --git a/components/doc/inputtextarea/apidoc.js b/components/doc/inputtextarea/apidoc.js
index 8f668217ab..1c1192a83a 100644
--- a/components/doc/inputtextarea/apidoc.js
+++ b/components/doc/inputtextarea/apidoc.js
@@ -26,6 +26,12 @@ export function ApiDoc(props) {
                             <td>false</td>
                             <td>When present, height of textarea changes as being typed.</td>
                         </tr>
+                        <tr>
+                            <td>keyfilter</td>
+                            <td>string/regex</td>
+                            <td>null</td>
+                            <td>Format definition of the keys to block.</td>
+                        </tr>
                         <tr>
                             <td>tooltip</td>
                             <td>any</td>
diff --git a/components/doc/inputtextarea/index.js b/components/doc/inputtextarea/index.js
deleted file mode 100644
index ba5672cb46..0000000000
--- a/components/doc/inputtextarea/index.js
+++ /dev/null
@@ -1,277 +0,0 @@
-import React, { memo } from 'react';
-import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
-import { CodeHighlight } from '../common/codehighlight';
-import { DevelopmentSection } from '../common/developmentsection';
-
-const InputTextareaDoc = memo(() => {
-    const sources = {
-        class: {
-            tabName: 'Class Source',
-            content: `
-import React, {Component} from 'react';
-import { InputTextarea } from 'primereact/inputtextarea';
-
-export class InputTextareaDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            value1: '',
-            value2: '',
-            value3: ''
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="card">
-                    <h5>Basic</h5>
-                    <InputTextarea value={this.state.value1} onChange={(e) => this.setState({value1: e.target.value})} rows={5} cols={30} />
-
-                    <h5>Auto Resize</h5>
-                    <InputTextarea value={this.state.value2} onChange={(e) => this.setState({value2: e.target.value})} rows={5} cols={30} autoResize />
-
-                    <h5>Disabled</h5>
-                    <InputTextarea value={this.state.value3} rows={5} cols={30} disabled />
-                </div>
-            </div>
-        )
-    }
-}
-                `
-        },
-        hooks: {
-            tabName: 'Hooks Source',
-            content: `
-import React, { useState } from 'react';
-import { InputTextarea } from 'primereact/inputtextarea';
-
-const InputTextareaDemo = () => {
-    const [value1, setValue1] = useState('');
-    const [value2, setValue2] = useState('');
-    const [value3, setValue3] = useState('');
-
-    return (
-        <div>
-            <div className="card">
-                <h5>Basic</h5>
-                <InputTextarea value={value1} onChange={(e) => setValue1(e.target.value)} rows={5} cols={30} />
-
-                <h5>Auto Resize</h5>
-                <InputTextarea value={value2} onChange={(e) => setValue2(e.target.value)} rows={5} cols={30} autoResize />
-
-                <h5>Disabled</h5>
-                <InputTextarea value={value3} rows={5} cols={30} disabled />
-            </div>
-        </div>
-    )
-}
-                `
-        },
-        ts: {
-            tabName: 'TS Source',
-            content: `
-import React, { useState } from 'react';
-import { InputTextarea } from 'primereact/inputtextarea';
-
-const InputTextareaDemo = () => {
-    const [value1, setValue1] = useState('');
-    const [value2, setValue2] = useState('');
-    const [value3, setValue3] = useState('');
-
-    return (
-        <div>
-            <div className="card">
-                <h5>Basic</h5>
-                <InputTextarea value={value1} onChange={(e) => setValue1(e.target.value)} rows={5} cols={30} />
-
-                <h5>Auto Resize</h5>
-                <InputTextarea value={value2} onChange={(e) => setValue2(e.target.value)} rows={5} cols={30} autoResize />
-
-                <h5>Disabled</h5>
-                <InputTextarea value={value3} rows={5} cols={30} disabled />
-            </div>
-        </div>
-    )
-}
-                `
-        },
-        browser: {
-            tabName: 'Browser Source',
-            imports: `
-    <script src="https://unpkg.com/primereact/core/core.min.js"></script>
-    <script src="https://unpkg.com/primereact/inputtextarea/inputtextarea.min.js"></script>`,
-            content: `
-const { useState } = React;
-const { InputTextarea } = primereact.inputtextarea;
-
-const InputTextareaDemo = () => {
-    const [value1, setValue1] = useState('');
-    const [value2, setValue2] = useState('');
-    const [value3, setValue3] = useState('');
-
-    return (
-        <div>
-            <div className="card">
-                <h5>Basic</h5>
-                <InputTextarea value={value1} onChange={(e) => setValue1(e.target.value)} rows={5} cols={30} />
-
-                <h5>Auto Resize</h5>
-                <InputTextarea value={value2} onChange={(e) => setValue2(e.target.value)} rows={5} cols={30} autoResize />
-
-                <h5>Disabled</h5>
-                <InputTextarea value={value3} rows={5} cols={30} disabled />
-            </div>
-        </div>
-    )
-}
-            `
-        }
-    };
-
-    return (
-        <div className="content-section documentation" id="app-doc">
-            <TabView>
-                <TabPanel header="Documentation">
-                    <h5>Import via Module</h5>
-                    <CodeHighlight lang="js">
-                        {`
-import { InputTextarea } from 'primereact/inputtextarea';
-`}
-                    </CodeHighlight>
-
-                    <h5>Import via CDN</h5>
-                    <CodeHighlight>
-                        {`
-<script src="https://unpkg.com/primereact/core/core.min.js"></script>
-<script src="https://unpkg.com/primereact/inputtextarea/inputtextarea.min.js"></script>
-`}
-                    </CodeHighlight>
-
-                    <h5>Getting Started</h5>
-                    <p>
-                        Textarea is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
-                    </p>
-                    <CodeHighlight>
-                        {`
-<InputTextarea rows={5} cols={30} value={value} onChange={(e) => setValue(event.target.value)} />
-`}
-                    </CodeHighlight>
-
-                    <h5>AutoResize</h5>
-                    <p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
-                    <CodeHighlight>
-                        {`
-<InputTextarea rows={5} cols={30} value={value} onChange={(e) => setValue(event.target.value)} autoResize />
-`}
-                    </CodeHighlight>
-
-                    <h5>Properties</h5>
-                    <p>InputTextarea passes any attribute to the underlying textarea element, additional attributes are as follows;</p>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>autoResize</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>When present, height of textarea changes as being typed.</td>
-                                </tr>
-                                <tr>
-                                    <td>tooltip</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Content of the tooltip.</td>
-                                </tr>
-                                <tr>
-                                    <td>tooltipOptions</td>
-                                    <td>object</td>
-                                    <td>null</td>
-                                    <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h5>Styling</h5>
-                    <p>
-                        Following is the list of structural style classes, for theming classes visit <Link href="/theming">theming</Link> page.
-                    </p>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>p-inputtextarea</td>
-                                    <td>Textarea element</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h5>Accessibility</h5>
-                    <DevelopmentSection>
-                        <h6>Screen Reader</h6>
-                        <p>
-                            InputTextarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using{' '}
-                            <i>aria-labelledby</i>, <i>aria-label</i> props.
-                        </p>
-                        <CodeHighlight>
-                            {`
-<label htmlFor="address1">Address 1</label>
-<InputTextarea id="address1" />
-
-<span id="address2">Address 2</span>
-<InputTextarea aria-labelledby="address2" />
-
-<InputTextarea aria-label="Address Details"/>
-`}
-                        </CodeHighlight>
-
-                        <h6>Keyboard Support</h6>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Key</th>
-                                        <th>Function</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <i>tab</i>
-                                        </td>
-                                        <td>Moves focus to the input.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </DevelopmentSection>
-                    <h5>Dependencies</h5>
-                    <p>None.</p>
-                </TabPanel>
-
-                {useLiveEditorTabs({ name: 'InputTextareaDemo', sources: sources })}
-            </TabView>
-        </div>
-    );
-});
-
-export default InputTextareaDoc;
diff --git a/components/doc/inputtextarea/keyfilterdoc.js b/components/doc/inputtextarea/keyfilterdoc.js
new file mode 100644
index 0000000000..76d1ecc1eb
--- /dev/null
+++ b/components/doc/inputtextarea/keyfilterdoc.js
@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import { InputTextarea } from '../../lib/inputtextarea/InputTextarea';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function KeyFilterDoc(props) {
+    const code = {
+        basic: `
+<InputTextarea keyfilter="int" placeholder="Integers" />
+        `,
+        javascript: `
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function KeyFilterDemo() {
+    return (
+        <InputTextarea keyfilter="int" placeholder="Integers" rows={2} cols={30}/>
+    )
+}
+        `,
+        typescript: `
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function KeyFilterDemo() {
+    return (
+        <InputTextarea keyfilter="int" placeholder="Integers" rows={2} cols={30}/>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                InputTextarea has built-in key filtering support to block certain keys, refer to <Link href="/keyfilter">keyfilter</Link> page for more information.
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputTextarea keyfilter="int" placeholder="Integers" rows={2} cols={30} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index d7b3837447..44268774d2 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -7,8 +7,8 @@ export const InputText = React.memo(
     React.forwardRef((props, ref) => {
         const elementRef = React.useRef(ref);
 
-        const onKeyPress = (event) => {
-            props.onKeyPress && props.onKeyPress(event);
+        const onKeyDown = (event) => {
+            props.onKeyDown && props.onKeyDown(event);
 
             if (props.keyfilter) {
                 KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
@@ -59,7 +59,7 @@ export const InputText = React.memo(
 
         return (
             <>
-                <input ref={elementRef} {...otherProps} className={className} onInput={onInput} onKeyPress={onKeyPress} onPaste={onPaste} />
+                <input ref={elementRef} {...otherProps} className={className} onInput={onInput} onKeyDown={onKeyDown} onPaste={onPaste} />
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
             </>
         );
@@ -74,6 +74,6 @@ InputText.defaultProps = {
     tooltip: null,
     tooltipOptions: null,
     onInput: null,
-    onKeyPress: null,
+    onKeyDown: null,
     onPaste: null
 };
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
index 4c41b06d8d..f4bc2fd69f 100644
--- a/components/lib/inputtextarea/InputTextarea.js
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
@@ -31,6 +32,22 @@ export const InputTextarea = React.memo(
             props.onKeyUp && props.onKeyUp(event);
         };
 
+        const onKeyDown = (event) => {
+            props.onKeyDown && props.onKeyDown(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
+        const onPaste = (event) => {
+            props.onPaste && props.onPaste(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
         const onInput = (event) => {
             if (props.autoResize) {
                 resize();
@@ -95,7 +112,7 @@ export const InputTextarea = React.memo(
 
         return (
             <>
-                <textarea ref={elementRef} {...otherProps} className={className} onFocus={onFocus} onBlur={onBlur} onKeyUp={onKeyUp} onInput={onInput}></textarea>
+                <textarea ref={elementRef} {...otherProps} className={className} onFocus={onFocus} onBlur={onBlur} onKeyUp={onKeyUp} onKeyDown={onKeyDown} onInput={onInput} onPaste={onPaste}></textarea>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
             </>
         );
@@ -106,7 +123,13 @@ InputTextarea.displayName = 'InputTextarea';
 InputTextarea.defaultProps = {
     __TYPE: 'InputTextarea',
     autoResize: false,
+    keyfilter: null,
+    onBlur: null,
+    onFocus: null,
+    onInput: null,
+    onKeyDown: null,
+    onKeyUp: null,
+    onPaste: null,
     tooltip: null,
-    tooltipOptions: null,
-    onInput: null
+    tooltipOptions: null
 };
diff --git a/components/lib/inputtextarea/inputtextarea.d.ts b/components/lib/inputtextarea/inputtextarea.d.ts
index a45f3b0d44..67f7d04c0b 100644
--- a/components/lib/inputtextarea/inputtextarea.d.ts
+++ b/components/lib/inputtextarea/inputtextarea.d.ts
@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { KeyFilterType } from '../keyfilter';
 import TooltipOptions from '../tooltip/tooltipoptions';
 
 export interface InputTextareaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'ref'> {
     autoResize?: boolean;
     children?: React.ReactNode;
+    keyfilter?: KeyFilterType;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
 }
diff --git a/pages/inputtextarea/index.js b/pages/inputtextarea/index.js
index 427b6ed2c3..efdbb55235 100644
--- a/pages/inputtextarea/index.js
+++ b/pages/inputtextarea/index.js
@@ -1,13 +1,14 @@
-import React, { useState } from 'react';
 import Head from 'next/head';
-import { DocSections } from '../../components/doc/common/docsections';
+import React from 'react';
 import { DocSectionNav } from '../../components/doc/common/docsectionnav';
-import { ImportDoc } from '../../components/doc/inputtextarea/importdoc';
-import { BasicDoc } from '../../components/doc/inputtextarea/basicdoc';
+import { DocSections } from '../../components/doc/common/docsections';
+import { ApiDoc } from '../../components/doc/inputtextarea/apidoc';
 import { AutoResizeDoc } from '../../components/doc/inputtextarea/autoresizedoc';
-import { FloatLabelDoc } from '../../components/doc/inputtextarea/floatlabeldoc';
+import { BasicDoc } from '../../components/doc/inputtextarea/basicdoc';
 import { DisabledDoc } from '../../components/doc/inputtextarea/disableddoc';
-import { ApiDoc } from '../../components/doc/inputtextarea/apidoc';
+import { FloatLabelDoc } from '../../components/doc/inputtextarea/floatlabeldoc';
+import { ImportDoc } from '../../components/doc/inputtextarea/importdoc';
+import { KeyFilterDoc } from '../../components/doc/inputtextarea/keyfilterdoc';
 
 const InputTextareaDemo = () => {
     const docs = [
@@ -31,6 +32,11 @@ const InputTextareaDemo = () => {
             label: 'Float Label',
             component: FloatLabelDoc
         },
+        {
+            id: 'keyfilter',
+            label: 'Key Filter',
+            component: KeyFilterDoc
+        },
         {
             id: 'disabled',
             label: 'Disabled',